import Link from 'next/link';
import { ChevronRight } from 'lucide-react';

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

interface BlogBreadcrumbsProps {
  items: BreadcrumbItem[];
  variant?: 'light' | 'dark';
}

export const BlogBreadcrumbs = ({
  items,
  variant = 'dark',
}: BlogBreadcrumbsProps) => {
  const textColor = variant === 'dark' ? 'text-gray-400' : 'text-gray-600';
  const hoverColor =
    variant === 'dark' ? 'hover:text-white' : 'hover:text-gray-900';
  const activeColor = variant === 'dark' ? 'text-white' : 'text-gray-900';

  return (
    <nav className="flex items-center gap-2 text-sm" aria-label="Breadcrumb">
      {items.map((item, index) => {
        const isLast = index === items.length - 1;

        return (
          <div key={item.label} className="flex items-center gap-2">
            {index > 0 && (
              <ChevronRight className={`w-4 h-4 ${textColor}`} />
            )}
            {item.href && !isLast ? (
              <Link
                href={item.href}
                className={`${textColor} ${hoverColor} transition-colors`}
              >
                {item.label}
              </Link>
            ) : (
              <span className={isLast ? activeColor : textColor}>
                {item.label}
              </span>
            )}
          </div>
        );
      })}
    </nav>
  );
};