import Link from 'next/link';
import React from 'react';

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

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export function Breadcrumb({ items }: BreadcrumbProps) {
  return (
    <nav className="px-6 py-2 bg-white border-b border-gray-200" aria-label="Breadcrumb">
      <ol className="flex flex-wrap items-center space-x-2 text-xs text-gray-500">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;

          return (
            <React.Fragment key={index}>
              {index > 0 && (
                <li aria-hidden="true" className="mx-1 text-gray-400">
                  /
                </li>
              )}
              <li>
                {isLast ? (
                  <span className="font-semibold text-gray-700" aria-current="page">
                    {item.label}
                  </span>
                ) : item.href ? (
                  <Link
                    href={item.href}
                    className="hover:text-blue-600 transition-colors focus-ring rounded"
                  >
                    {item.label}
                  </Link>
                ) : (
                  <span>{item.label}</span>
                )}
              </li>
            </React.Fragment>
          );
        })}
      </ol>
    </nav>
  );
}