import {LogIn, LogOut, Palette} from 'lucide-react';
import {Button} from '@/components/ui/button';

interface HeaderProps {
  isAuthenticated: boolean;
  onLoginClick: () => void;
  onLogout: () => void;
}

export const Header = ({isAuthenticated, onLoginClick, onLogout}: HeaderProps) => {
  return (
    <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center justify-between px-4 md:px-6">
        <div className="flex items-center gap-2">
          <Palette className="h-6 w-6" />
          <h1 className="text-2xl font-bold tracking-tight">Albert Jeffers</h1>
        </div>
        <nav className="flex items-center gap-4">
          <a href="#gallery" className="text-sm font-medium transition-colors hover:text-primary">
            Gallery
          </a>
          {/* <a href="#about" className="text-sm font-medium transition-colors hover:text-primary">
            About
          </a> */}
          {isAuthenticated ? (
            <Button onClick={onLogout} variant="outline" size="sm">
              <LogOut className="mr-2 h-4 w-4" />
              Logout
            </Button>
          ) : (
            <Button onClick={onLoginClick} variant="outline" size="sm">
              <LogIn className="mr-2 h-4 w-4" />
              Login
            </Button>
          )}
        </nav>
      </div>
    </header>
  );
};