import { ChevronRight } from 'lucide-react';
import React from 'react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Link } from './Link';
import { Text } from './Text';

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

export interface BreadcrumbsProps {
  items: BreadcrumbItem[];
}

export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
  return (
    <Box display="flex" alignItems="center" gap={2}>
      {items.map((item, index) => {
        const isLast = index === items.length - 1;
        return (
          <React.Fragment key={index}>
            {index > 0 && <Icon icon={ChevronRight} size={3} intent="low" />}
            {isLast || !item.href ? (
              <Text size="sm" variant={isLast ? 'high' : 'low'} weight={isLast ? 'bold' : 'normal'}>
                {item.label}
              </Text>
            ) : (
              <Link href={item.href} variant="secondary">
                <Text size="sm">{item.label}</Text>
              </Link>
            )}
          </React.Fragment>
        );
      })}
    </Box>
  );
};