"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronRight, Home } from "lucide-react";
import { cn } from "@/lib/utils";

// Route label mappings
const routeLabels: Record<string, string> = {
  "/": "Dashboard",
  "/activity": "Activity",
  "/calendar": "Calendar",
  "/tasks": "Tasks",
  "/projects": "Projects",
  "/documents": "Documents",
  "/tools": "Tools",
  "/mission": "Mission",
};

interface BreadcrumbItem {
  href: string;
  label: string;
  isLast: boolean;
}

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

  // Generate breadcrumb items from pathname
  const getBreadcrumbItems = (): BreadcrumbItem[] => {
    const items: BreadcrumbItem[] = [
      { href: "/", label: "Home", isLast: pathname === "/" },
    ];

    // Skip home for other paths
    if (pathname === "/") return items;

    // Add current page
    const label = routeLabels[pathname] || pathname.split("/").pop() || "";
    items.push({
      href: pathname,
      label: label.charAt(0).toUpperCase() + label.slice(1),
      isLast: true,
    });

    return items;
  };

  const items = getBreadcrumbItems();

  return (
    <nav
      aria-label="Breadcrumb"
      className="flex items-center space-x-1 text-sm text-muted-foreground mb-6"
    >
      {items.map((item, index) => (
        <div key={item.href} className="flex items-center">
          {index > 0 && (
            <ChevronRight className="w-4 h-4 mx-1 text-muted-foreground/50" />
          )}
          {item.isLast ? (
            <span className="font-medium text-foreground" aria-current="page">
              {item.label}
            </span>
          ) : (
            <Link
              href={item.href}
              className={cn(
                "hover:text-foreground transition-colors flex items-center gap-1",
                index === 0 && "text-muted-foreground hover:text-foreground"
              )}
            >
              {index === 0 && <Home className="w-3.5 h-3.5" />}
              {item.label}
            </Link>
          )}
        </div>
      ))}
    </nav>
  );
}