import { ActionLink } from '@/components/actions/ActionLink';
import { Icon } from '@/components/foundation/Icon';
import styles from './Breadcrumbs.module.css';

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

export function Breadcrumbs({ label, items }: { label: string; items: BreadcrumbItem[] }) {
  return (
    <nav aria-label={label} className={styles.nav}>
      <ol>
        {items.map((item, index) => {
          const current = index === items.length - 1;
          return (
            <li key={`${item.label}-${index}`}>
              {index > 0 ? (
                <Icon
                  name="chevron-forward"
                  size="sm"
                  directionBehavior="mirror"
                  className={styles.separator}
                />
              ) : null}
              {item.href && !current ? (
                <ActionLink href={item.href} variant="inline">
                  {item.label}
                </ActionLink>
              ) : (
                <span aria-current={current ? 'page' : undefined}>{item.label}</span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}