'use client';

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

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

interface PageNavProps {
  items: BreadcrumbItem[];
}

export function PageNav({ items }: PageNavProps) {
  return (
    <nav aria-label="breadcrumb" className="flex items-center gap-1.5 text-sm text-[#A3A3A3] mb-8">
      <StaticLink href="/" className="flex items-center hover:text-[#C41E3A] transition-colors" aria-label="返回首页">
        <Home className="w-3.5 h-3.5" />
      </StaticLink>
      {items.map((item, index) => {
        const isLast = index === items.length - 1;
        return (
          <div key={index} className="flex items-center gap-1.5">
            <ChevronRight className="w-3.5 h-3.5 text-[#D4D4D4]" />
            {isLast || !item.href ? (
              <span className={isLast ? 'text-[#1C1C1C] font-medium' : ''}>
                {item.label}
              </span>
            ) : (
              <StaticLink
                href={item.href}
                className="hover:text-[#C41E3A] transition-colors"
              >
                {item.label}
              </StaticLink>
            )}
          </div>
        );
      })}
    </nav>
  );
}