import { useAuth } from '../contexts/AuthContext';

const Dashboard = () => {
  const { user, logout } = useAuth();

  const handleLogout = async () => {
    await logout();
  };

  return (
    <div className="dashboard">
      <header className="dashboard-header">
        <h1>Trip Planner Dashboard</h1>
        <div className="user-info">
          <span>Welcome, {user?.name}!</span>
          <button onClick={handleLogout} className="logout-btn">
            Logout
          </button>
        </div>
      </header>

      <main className="dashboard-content">
        <div className="welcome-section">
          <h2>Welcome to Your Trip Planner</h2>
          <p>Start planning your next adventure!</p>
        </div>

        <div className="features-grid">
          <div className="feature-card">
            <h3>Plan Trips</h3>
            <p>Create and organize your travel itineraries</p>
          </div>

          <div className="feature-card">
            <h3>Save Destinations</h3>
            <p>Keep track of places you want to visit</p>
          </div>

          <div className="feature-card">
            <h3>Share Plans</h3>
            <p>Collaborate with friends and family</p>
          </div>
        </div>
      </main>
    </div>
  );
};

export default Dashboard;