import { Fragment, type ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { ChevronRight } from 'lucide-react'

/**
 * Хлебные крошки для edit-страниц: «Каталог / Товары / Молоко 3.2%».
 *
 * Каждый item с `to` — кликабельная ссылка (sm grey). Последний item —
 * текущий, не кликабельный, semibold темнее. Разделитель — ChevronRight.
 *
 * Используется через PageHeader/инлайн в шапке формы.
 */
export interface BreadcrumbItem {
  label: ReactNode
  to?: string
}

interface Props {
  items: BreadcrumbItem[]
  className?: string
}

export function Breadcrumbs({ items, className }: Props) {
  if (items.length === 0) return null
  return (
    <nav aria-label="Хлебные крошки" className={'flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400 min-w-0 ' + (className ?? '')}>
      {items.map((item, idx) => {
        const isLast = idx === items.length - 1
        const content = isLast
          ? <span className="text-slate-700 dark:text-slate-300 font-medium truncate" title={typeof item.label === 'string' ? item.label : undefined}>{item.label}</span>
          : item.to
            ? <Link to={item.to} className="hover:text-slate-700 dark:hover:text-slate-300 hover:underline underline-offset-4 truncate">{item.label}</Link>
            : <span className="truncate">{item.label}</span>
        return (
          <Fragment key={idx}>
            {idx > 0 && <ChevronRight className="w-3 h-3 shrink-0 text-slate-300 dark:text-slate-600" />}
            <span className="min-w-0">{content}</span>
          </Fragment>
        )
      })}
    </nav>
  )
}
