import * as React from 'react';
import Link from 'next/link';
import { ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';

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

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

export function Breadcrumb({ items, className }: BreadcrumbProps) {
  return (
    <nav 
      className={cn('flex items-center gap-2 text-sm text-[#B8B8C0] mb-4', className)}
      aria-label="パンくずリスト"
    >
      {items.map((item, index) => (
        <React.Fragment key={index}>
          {index > 0 && (
            <ChevronRight className="h-4 w-4 text-[#2A2A33]" aria-hidden="true" />
          )}
          {item.href ? (
            <Link 
              href={item.href} 
              className="text-[#E60023] hover:text-[#FF2A3D] transition-colors"
            >
              {item.label}
            </Link>
          ) : (
            <span className="text-white font-semibold">
              {item.label}
            </span>
          )}
        </React.Fragment>
      ))}
    </nav>
  );
}
