"use client";

import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { useLanguage } from "@/lib/i18n";

interface AdminBreadcrumbProps {
  current: string;
  parent?: string;
  parentHref?: string;
}

const labelKeys: Record<
  string,
  Parameters<ReturnType<typeof useLanguage>["t"]>[0]
> = {
  Dashboard: "admin.dashboard",
  Settings: "admin.settings",
  "Update Profile": "admin.updateProfile",
  "Change Password": "admin.changePassword",
  "Coming Soon": "admin.comingSoon",
  "Blog Management": "admin.blogManagement",
  "Monthly Reports": "admin.monthlyReports",
  "Guide Management": "admin.guideManagement",
  "Tour Guides": "admin.tourGuides",
  "Master Directories": "admin.masterDirectories",
  "Document Types": "admin.documentTypes",
  Languages: "admin.languages",
  "Spoken Languages": "admin.languages",
  Locations: "admin.locations",
  "Service Locations": "admin.locations",
  Courses: "admin.courses",
  Expertises: "admin.expertises",
  Notifications: "admin.notifications",
  "ID Cards": "admin.idCards",
  Certifications: "admin.certifications",
};

export function AdminBreadcrumb({
  current,
  parent = "Dashboard",
  parentHref = "/admin",
}: AdminBreadcrumbProps) {
  const { t } = useLanguage();
  const currentLabel = labelKeys[current] ? t(labelKeys[current]) : current;
  const parentLabel = labelKeys[parent] ? t(labelKeys[parent]) : parent;

  return (
    <nav aria-label="Breadcrumb" className="mb-4">
      <div className="inline-flex items-center gap-2 rounded-2xl bg-white px-4 py-3 text-sm font-bold shadow-sm ring-1 ring-[var(--theme-border)]">
        <Link
          href={parentHref}
          className="text-muted-foreground transition-colors hover:text-[var(--theme-primary)]"
        >
          {parentLabel}
        </Link>
        <ChevronRight className="h-4 w-4 text-muted-foreground/55" />
        <span className="text-foreground">{currentLabel}</span>
      </div>
    </nav>
  );
}