"use client";

import { Building2, Settings } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "@/components/ui/button";

export function AdminHeader() {
  const pathname = usePathname();

  const isOverviewActive = pathname === "/admin";
  const isManageActive = pathname === "/admin/manage";

  return (
    <div className="text-center space-y-4 mb-12">
      <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
        <Building2 className="h-4 w-4 text-blue-400" />
        <span className="text-sm font-medium text-slate-200">
          Administration
        </span>
      </div>

      <h1 className="text-4xl font-bold text-white">Dashboard Managérial</h1>

      <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
        Vue d'ensemble des compétences par équipe et direction pour pilotage
        stratégique
      </p>

      <div className="flex justify-center gap-4 pt-4">
        <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1">
          <div className="flex">
            <Link href="/admin">
              <Button
                variant="ghost"
                className={`px-4 py-2 rounded-xl transition-colors ${
                  isOverviewActive
                    ? "bg-white/20 text-white shadow-sm"
                    : "text-slate-400 hover:text-white hover:bg-white/10"
                }`}
              >
                <Building2 className="w-4 h-4 mr-2" />
                Vue d'ensemble
              </Button>
            </Link>
            <Link href="/admin/manage">
              <Button
                variant="ghost"
                className={`px-4 py-2 rounded-xl transition-colors ${
                  isManageActive
                    ? "bg-white/20 text-white shadow-sm"
                    : "text-slate-400 hover:text-white hover:bg-white/10"
                }`}
              >
                <Settings className="w-4 h-4 mr-2" />
                Gestion
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}