import * as React from "react";
import Link from "next/link";
import { ChevronRight, Home } from "lucide-react";
import { cn } from "@/shared/utils/utils";

export interface BreadcrumbItem {
  label: string;
  href?: string;
  icon?: React.ComponentType<{ className?: string }>;
}

export interface BreadcrumbProps {
  items: BreadcrumbItem[];
  className?: string;
}

export function Breadcrumb({ items, className }: BreadcrumbProps) {
  return (
    <nav aria-label="Breadcrumb" className={cn("flex items-center text-xs font-semibold text-zinc-500", className)}>
      <ol className="flex items-center gap-1.5 flex-wrap">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          const Icon = item.icon;

          return (
            <li key={index} className="flex items-center gap-1.5">
              {index > 0 && (
                <ChevronRight className="w-3.5 h-3.5 text-zinc-400 shrink-0" aria-hidden="true" />
              )}
              {isLast ? (
                <span className="flex items-center gap-1.5 font-bold text-[#0F9FDF] bg-[#E7F6FD] px-2.5 py-1 rounded-lg border border-[#0F9FDF]/20">
                  {Icon ? <Icon className="w-3.5 h-3.5 text-[#0F9FDF] shrink-0" /> : index === 0 ? <Home className="w-3.5 h-3.5 text-[#0F9FDF] shrink-0" /> : null}
                  <span>{item.label}</span>
                </span>
              ) : item.href ? (
                <Link
                  href={item.href}
                  className="flex items-center gap-1.5 text-zinc-600 hover:text-zinc-900 transition-colors px-2 py-1 rounded-md hover:bg-zinc-100"
                >
                  {Icon ? <Icon className="w-3.5 h-3.5 text-zinc-400 shrink-0" /> : index === 0 ? <Home className="w-3.5 h-3.5 text-zinc-400 shrink-0" /> : null}
                  <span>{item.label}</span>
                </Link>
              ) : (
                <span className="flex items-center gap-1.5 text-zinc-600 px-2 py-1">
                  {Icon ? <Icon className="w-3.5 h-3.5 text-zinc-400 shrink-0" /> : index === 0 ? <Home className="w-3.5 h-3.5 text-zinc-400 shrink-0" /> : null}
                  <span>{item.label}</span>
                </span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}