'use client';

import Link from 'next/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-2 text-sm text-[#5C5C5C] py-4">
      <Link href="/" className="flex items-center hover:text-[#C41E3A] transition-colors">
        <Home className="w-4 h-4" />
      </Link>
      {items.map((item, index) => (
        <div key={index} className="flex items-center">
          <ChevronRight className="w-4 h-4 text-[#E5E5E5]" />
          <Link
            href={item.href}
            className="ml-2 hover:text-[#C41E3A] transition-colors"
          >
            {item.label}
          </Link>
        </div>
      ))}
    </nav>
  );
}