"use client";

import LanguageAwareLink from "../../lib/utils/LanguageAwareLink";
import { usePathname } from "next/navigation";

interface BreadcrumbsProps {
  currentTitle?: string;
  hideLast?: boolean;
}

const LABEL_MAP: Record<string, string> = {
  about: "About",
  workshops: "Workshops",
  programs: "Programs",
  contact: "Contact",
  "class-registration": "Class Registration",
  "form-submission": "Form Submission",
};

export default function Breadcrumbs({ currentTitle, hideLast }: BreadcrumbsProps) {
  const pathname = usePathname();
  if (!pathname) return null;

  let segments = pathname.split("/").filter(Boolean);
  if (hideLast && segments.length > 0) {
    segments = segments.slice(0, -1);
  }


  return (
    <nav aria-label="Breadcrumb" className="mb-4">
      <p className="md:text-[14px] font-light flex flex-wrap gap-2 text-gray-600">
        <LanguageAwareLink href="/" className="hover:text-[#fafafa] text-white text-[14px] xl:text-[16px] md:text-[14px] font-light">
          Home
        </LanguageAwareLink>

        {segments.map((segment, index) => {
          const href = "/" + segments.slice(0, index + 1).join("/");
          const isLast = index === segments.length - 1;

          // Detail page → replace slug with API title
          if (isLast && currentTitle) {
            return (
              <span key={href} className="flex gap-2">
                <span className="text-white">-</span>
                <span className="font-medium font-normal text-white text-[14px] xl:text-[16px] md:text-[14px] ">
                  {currentTitle}
                </span>
              </span>
            );
          }

          const label =
            LABEL_MAP[segment] ??
            segment.replace(/-/g, " ").replace(/\b\w/g, l => l.toUpperCase());

          return (
            <span key={href} className="flex gap-2">
              <span className="text-white">-</span>
              <LanguageAwareLink href={href} className="hover:text-[#fafafa] font-medium font-normal text-white text-[14px] xl:text-[16px] md:text-[14px] ">
                {label}
              </LanguageAwareLink>
            </span>
          );
        })}
      </p>
    </nav>
  );
}