import { Link } from 'react-router-dom';
import { useAuth } from './AuthContext';

export default function Header() {
  const { isAuthenticated, logout } = useAuth();

  return (
    <header className="bg-white shadow-sm p-4 flex justify-between items-center">
      <h1 className="text-xl font-bold">
        <Link to="/">MyApp</Link>
      </h1>
      <nav>
        <Link to="/" className="text-gray-600 hover:text-gray-900 mx-2">Products</Link>
        <Link to="/cart" className="text-gray-600 hover:text-gray-900 mx-2">Cart</Link>
        {isAuthenticated ? (
          <button onClick={logout} className="text-red-500 hover:text-red-700 mx-2">Logout</button>
        ) : (
          <Link to="/login" className="text-blue-500 hover:text-blue-700 mx-2">Login</Link>
        )}
      </nav>
    </header>
  );
}