import Link from "next/link";

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

interface BreadcrumbsProps {
  items: BreadcrumbItem[];
}

export function Breadcrumbs({ items }: BreadcrumbsProps) {
  return (
    <nav
      aria-label="Breadcrumb"
      className="mb-6 flex items-center gap-1 text-[0.7rem] font-bold uppercase tracking-[0.14em] text-ink-tertiary"
      style={{ fontFamily: '"Courier New", monospace' }}
    >
      <Link href="/" className="transition-colors hover:text-ink-primary">
        Home
      </Link>
      {items.map((item, i) => (
        <span key={i} className="flex items-center gap-1">
          <span className="mx-0.5 text-ink-tertiary/50">·</span>
          {item.href ? (
            <Link href={item.href} className="transition-colors hover:text-ink-primary">
              {item.label}
            </Link>
          ) : (
            <span className="text-ink-primary">{item.label}</span>
          )}
        </span>
      ))}
    </nav>
  );
}