'use client';

import { StaticLink } from '@/components/ui/static-link';
import { ChevronRight, Home } from 'lucide-react';

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

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export function Breadcrumb({ items }: BreadcrumbProps) {
  return (
    <nav aria-label="breadcrumb" className="flex items-center space-x-1 text-sm text-[#5C5C5C] py-4">
      <StaticLink href="/" className="flex items-center hover:text-[#C41E3A] transition-colors" aria-label="返回首页">
        <Home className="w-4 h-4" />
      </StaticLink>
      {items.map((item, index) => (
        <div key={index} className="flex items-center">
          <ChevronRight className="w-4 h-4 text-[#E5E5E5]" />
          <StaticLink
            href={item.href}
            className="ml-1 hover:text-[#C41E3A] transition-colors"
          >
            {item.label}
          </StaticLink>
        </div>
      ))}
    </nav>
  );
}
