import { ChevronLeft } from "lucide-react";
import { Link } from "react-router";

export type BreadcrumbItem = { label: string; to?: string };

export default function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
  return <nav className="flex flex-wrap items-center justify-center gap-2 text-xs font-bold text-slate-400" aria-label="مسیر صفحه">{items.map((item, index) => <span key={item.label} className="inline-flex items-center gap-2">{item.to ? <Link to={item.to} className="hover:text-[#5b50d6]">{item.label}</Link> : <span>{item.label}</span>}{index < items.length - 1 && <ChevronLeft size={13} />}</span>)}</nav>;
}