"use client";

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

const routeLabels: Record<string, string> = {
  catalog: "Catalog",
  about: "About",
  donate: "Donate",
  community: "Community",
  guides: "Guides",
  contact: "Contact",
  admin: "Admin",
  "server-status": "Server Status",
  games: "Games",
  documentary: "Documentary",
};

export function Breadcrumb() {
  const locale = useLocale();
  const pathname = usePathname();

  const segments = pathname.split("/").filter(Boolean).slice(1); // remove locale
  if (segments.length === 0) return null;

  return (
    <nav aria-label="Breadcrumb" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4 pb-0">
      <ol className="flex items-center gap-2 text-sm text-[#6b6b75]">
        <li>
          <Link href={`/${locale}`} className="hover:text-[#d4a574] transition-colors">
            Home
          </Link>
        </li>
        {segments.map((segment, i) => {
          const isLast = i === segments.length - 1;
          const href = `/${locale}/${segments.slice(0, i + 1).join("/")}`;
          const label = routeLabels[segment] || segment;

          return (
            <li key={segment + i} className="flex items-center gap-2">
              <span className="text-[rgba(255,255,255,0.1)]">/</span>
              {isLast ? (
                <span className="text-[#a0a0a8] font-medium">{label}</span>
              ) : (
                <Link href={href} className="hover:text-[#d4a574] transition-colors">
                  {label}
                </Link>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}