import { Link } from 'react-router-dom'
import { ChevronRight, Home } from 'lucide-react'
import { useBreadcrumbContext } from '../contexts/BreadcrumbContext'

export default function Breadcrumb() {
  const { breadcrumbs } = useBreadcrumbContext()

  // Don't render if no breadcrumbs or just Home
  if (breadcrumbs.length <= 1) {
    return null
  }

  return (
    <nav className="flex items-center gap-1.5 text-sm text-muted-foreground mb-4 px-1">
      {breadcrumbs.map((item, index) => {
        const isLast = index === breadcrumbs.length - 1
        const isFirst = index === 0
        const Icon = item.icon

        return (
          <div key={index} className="flex items-center gap-1.5">
            {index > 0 && (
              <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/50" />
            )}

            {item.path && !isLast ? (
              <Link
                to={item.path}
                className="flex items-center gap-1.5 hover:text-foreground transition-colors rounded px-1.5 py-0.5 hover:bg-secondary/50"
              >
                {isFirst && <Home className="w-3.5 h-3.5" />}
                {Icon && !isFirst && <Icon className="w-3.5 h-3.5" />}
                <span className="max-w-[150px] truncate">{item.label}</span>
              </Link>
            ) : (
              <span className="flex items-center gap-1.5 text-foreground font-medium px-1.5 py-0.5">
                {Icon && <Icon className="w-3.5 h-3.5" />}
                <span className="max-w-[200px] truncate">{item.label}</span>
              </span>
            )}
          </div>
        )
      })}
    </nav>
  )
}
