import { Link } from 'react-router-dom'
import { ChevronRight } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { translateBreadcrumbLabel } from '../i18n/messages'
import { useT } from '../i18n/useT'
import styles from './Breadcrumbs.module.css'

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

interface BreadcrumbsProps {
  items: BreadcrumbItem[]
}

export function Breadcrumbs({ items }: BreadcrumbsProps) {
  const { locale } = useLocale()
  const t = useT()

  return (
    <nav className={styles.breadcrumbs} aria-label={t('common.breadcrumb')}>
      <ol className={styles.list}>
        {items.map((item, index) => {
          const isLast = index === items.length - 1
          const label = translateBreadcrumbLabel(locale, item.label)
          return (
            <li key={`${item.label}-${index}`} className={styles.item}>
              {index > 0 && (
                <ChevronRight size={14} className={styles.separator} aria-hidden="true" />
              )}
              {item.href && !isLast ? (
                <Link to={item.href} className={styles.link}>
                  {label}
                </Link>
              ) : (
                <span className={isLast ? styles.current : styles.text}>{label}</span>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}
