import Link from "next/link";
import { ChevronRight, Home } from "lucide-react";

interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export default function Breadcrumb({ items }: BreadcrumbProps) {
  return (
    <nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1.5 text-sm">
      <Link
        href="/"
        className="flex items-center gap-1 text-slate-500 transition-colors hover:text-emerald-400"
      >
        <Home className="h-3.5 w-3.5" />
        Ana Sayfa
      </Link>
      {items.map((item, i) => (
        <span key={i} className="flex items-center gap-1.5">
          <ChevronRight className="h-3.5 w-3.5 text-slate-600" />
          {item.href ? (
            <Link
              href={item.href}
              className="text-slate-500 transition-colors hover:text-emerald-400"
            >
              {item.label}
            </Link>
          ) : (
            <span className="font-medium text-slate-300">{item.label}</span>
          )}
        </span>
      ))}
    </nav>
  );
}