'use client';

import Link from 'next/link';

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

interface BreadcrumbsProps {
  items: BreadcrumbItem[];
  className?: string;
}

export default function Breadcrumbs({ items, className }: BreadcrumbsProps) {
  if (!items || items.length === 0) {
    return null;
  }

  const lastIndex = items.length - 1;

  return (
    <nav
      aria-label="Breadcrumb"
      className={className ?? 'text-sm text-gray-400 mb-4'}
    >
      <ol className="flex items-center gap-2 flex-wrap">
        {items.map((item, index) => {
          const isLast = index === lastIndex;
          const content = item.href && !isLast ? (
            <Link
              href={item.href}
              className="hover:text-primary-blue transition-colors"
            >
              {item.label}
            </Link>
          ) : (
            <span className={isLast ? 'text-white' : ''}>{item.label}</span>
          );

          return (
            <li key={`${item.label}-${index}`} className="flex items-center gap-2">
              {index > 0 && (
                <span className="text-gray-600">/</span>
              )}
              {content}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}