'use client';

import { Fragment } from 'react';
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="面包屑导航"
      className="flex items-center text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4"
      style={{ lineHeight: '1' }}
    >
      <ol className="flex items-center list-none m-0 p-0">
        <li className="flex items-center">
          <StaticLink
            href="/"
            className="hover:text-[var(--color-brand-primary)] transition-colors shrink-0"
            aria-label="返回首页"
            style={{ minHeight: 0, minWidth: 0 }}
          >
            <Home className="w-3.5 h-3.5" />
          </StaticLink>
        </li>
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <Fragment key={index}>
              <li className="flex items-center" aria-hidden="true">
                <ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-1" />
              </li>
              <li className="flex items-center">
                {isLast ? (
                  <span className="text-[#1C1C1C] font-medium whitespace-nowrap" aria-current="page">
                    {item.label}
                  </span>
                ) : (
                  <StaticLink
                    href={item.href}
                    className="hover:text-[var(--color-brand-primary)] transition-colors whitespace-nowrap"
                    style={{ minHeight: 0, minWidth: 0 }}
                  >
                    {item.label}
                  </StaticLink>
                )}
              </li>
            </Fragment>
          );
        })}
      </ol>
    </nav>
  );
}