import Link from 'next/link';
import { ChevronRight, Home } from 'lucide-react';
import type { BreadcrumbItem } from '@/lib/types';

interface Props {
  items: BreadcrumbItem[];
}

export default function BreadcrumbNav({ items }: Props) {
  return (
    <nav className="flex flex-wrap items-center gap-1 text-sm" aria-label="Breadcrumb">
      <Link href="/" className="flex items-center gap-1 text-slate-500 hover:text-blue-600 transition-colors">
        <Home className="h-3.5 w-3.5" />
        <span className="hidden sm:inline">Home</span>
      </Link>

      {items.map((item, idx) => {
        const isLast = idx === items.length - 1;
        return (
          <div key={item.id} className="flex items-center gap-1">
            <ChevronRight className="h-3.5 w-3.5 text-slate-300 flex-shrink-0" />
            {isLast ? (
              <span className="font-medium text-slate-800 max-w-[200px] truncate">{item.name}</span>
            ) : (
              <Link
                href={`/folders/${item.id}`}
                className="text-slate-500 hover:text-blue-600 transition-colors max-w-[120px] truncate"
              >
                {item.name}
              </Link>
            )}
          </div>
        );
      })}
    </nav>
  );
}