import { Link } from '@/ui/Link';
import { Box } from '@/ui/primitives/Box';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';

export type BreadcrumbItem = {
  label: string;
  href?: string;
};

interface BreadcrumbsProps {
  items: BreadcrumbItem[];
  className?: string;
}

export function Breadcrumbs({ items }: BreadcrumbsProps) {
  if (!items || items.length === 0) {
    return null;
  }

  const lastIndex = items.length - 1;

  return (
    <Box as="nav" aria-label="Breadcrumb" mb={4}>
      <Stack direction="row" align="center" gap={2} wrap>
        {items.map((item, index) => {
          const isLast = index === lastIndex;
          const content = item.href && !isLast ? (
            <Link
              href={item.href}
              variant="ghost"
            >
              {item.label}
            </Link>
          ) : (
            <Text color={isLast ? 'text-white' : 'text-gray-400'}>{item.label}</Text>
          );

          return (
            <Stack key={`${item.label}-${index}`} direction="row" align="center" gap={2}>
              {index > 0 && (
                <Text color="text-gray-600">/</Text>
              )}
              {content}
            </Stack>
          );
        })}
      </Stack>
    </Box>
  );
}