'use client';

import Link from "next/link";
import { usePathname } from "next/navigation";

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

    const links = [
        {
            href: "/admin/rgpd",
            label: "Demandes"
        },
        {
            href: "/admin/rgpd/create",
            label: "Nouvelle demande"
        }
    ];

    return (
        <div className="bg-white rounded-2xl shadow-sm border border-[#e6efea] p-2">
            <div className="flex flex-wrap gap-2">

                {links.map((link) => {
                    const active = pathname === link.href;

                    return (
                        <Link
                            key={link.href}
                            href={link.href}
                            className={`
            relative px-2 py-2 rounded-xl text-sm font-medium
            transition-all duration-200 ease-out

            focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/30

            ${active
                                    ? "bg-[#2f7d5f] text-white shadow-sm"
                                    : "bg-[#f4f8f6] text-[#2f5d4b] hover:bg-[#e8f3ef] hover:text-[#1f5f4a]"
                                }
          `}
                        >
                            {link.label}
                            {active && (
                                <span className="absolute left-2 right-2 -bottom-1 h-[2px] bg-white/60 rounded-full" />
                            )}
                        </Link>
                    );
                })}
            </div>
        </div>
    );
}