type Crumb = {
  label: string
  action?: () => void
}

type BreadcrumbsProps = {
  items: Crumb[]
}

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

  return (
    <div className="breadcrumb">
      {items.map((item, index) => {
        const isLast = index === items.length - 1
        return (
          <span key={`${item.label}-${index}`}>
            {!isLast && item.action ? (
              <span onClick={item.action}>{item.label}</span>
            ) : (
              <span>{item.label}</span>
            )}
            {!isLast ? ' / ' : ''}
          </span>
        )
      })}
    </div>
  )
}