"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/layout/theme-toggle";
import { BarChart3, User, Settings } from "lucide-react";

interface NavigationProps {
  userInfo?: {
    firstName: string;
    lastName: string;
    teamName: string;
  };
}

export function Navigation({ userInfo }: NavigationProps = {}) {
  const pathname = usePathname();

  const navItems = [
    {
      href: "/",
      label: "Tableau de bord",
      icon: BarChart3,
    },
    {
      href: "/evaluation",
      label: "Évaluation",
      icon: User,
    },
  ];

  return (
    <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
        <div className="flex items-center space-x-6">
          <Link href="/" className="font-bold text-xl">
            PeakSkills
          </Link>

          <nav className="hidden md:flex items-center space-x-4">
            {navItems.map((item) => {
              const Icon = item.icon;
              const isActive = pathname === item.href;

              return (
                <Button
                  key={item.href}
                  variant={isActive ? "default" : "ghost"}
                  asChild
                  size="sm"
                >
                  <Link href={item.href} className="flex items-center gap-2">
                    <Icon className="h-4 w-4" />
                    {item.label}
                  </Link>
                </Button>
              );
            })}
          </nav>
        </div>

        <div className="flex items-center space-x-4">
          {userInfo && (
            <div className="flex items-center gap-3 px-3 py-2 rounded-lg bg-muted/50">
              <div className="w-8 h-8 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center">
                <User className="h-4 w-4 text-primary" />
              </div>
              <div className="hidden sm:block">
                <p className="text-sm font-medium">
                  {userInfo.firstName} {userInfo.lastName}
                </p>
                <p className="text-xs text-muted-foreground">
                  {userInfo.teamName}
                </p>
              </div>
            </div>
          )}
          <ThemeToggle />
        </div>
      </div>
    </header>
  );
}