import Link from'next/link'
import { ChevronRight } from'lucide-react'

interface BreadcrumbItem {
 label: string
 href?: string
}

interface Props {
 items: BreadcrumbItem[]
 className?: string
}

export default function Breadcrumb({ items, className =''}: Props) {
 return (
 <nav aria-label="Breadcrumb"className={`flex items-center gap-1 text-xs text-muted-foreground ${className}`}>
 {items.map((item, i) => (
 <span key={i} className="flex items-center gap-1 min-w-0">
 {i > 0 && <ChevronRight size={12} className="shrink-0 text-secondary"/>}
 {item.href ? (
 <Link
 href={item.href}
 className="hover:text-primary transition-colors truncate"
 >
 {item.label}
 </Link>
 ) : (
 <span className="text-foreground font-medium truncate">{item.label}</span>
 )}
 </span>
 ))}
 </nav>
 )
}