import Link from 'next/link';
import { Zap, LayoutDashboard, PlusCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { UserNav, type UserNavProps } from './UserNav'; 
import { ThemeToggle } from './ThemeToggle';

interface HeaderProps {
  user: UserNavProps['user']; // User can be null if not logged in or error
}

export function Header({ user }: HeaderProps) {
  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center">
        <Link href="/dashboard" className="flex items-center">
          <Zap className="h-6 w-6 text-primary" />
          <span className="ml-2 text-lg font-semibold text-foreground">Anita Deploy</span>
        </Link>
        <nav className="ml-10 hidden md:flex items-center space-x-6 text-sm font-medium">
          <Link
            href="/dashboard"
            className="transition-colors hover:text-primary text-foreground/70"
          >
            <LayoutDashboard className="inline-block mr-1 h-4 w-4" />
            Dashboard
          </Link>
          <Link
            href="/dashboard/deploy"
            className="transition-colors hover:text-primary text-foreground/70"
          >
            <PlusCircle className="inline-block mr-1 h-4 w-4" />
            New Deployment
          </Link>
        </nav>
        <div className="ml-auto flex items-center space-x-4">
          <ThemeToggle />
          <UserNav user={user} />
        </div>
      </div>
    </header>
  );
}