'use client'

import Link from 'next/link'
import { ChevronRight, Home } from 'lucide-react'
import clsx from 'clsx'

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

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

export function Breadcrumbs({ items, className }: BreadcrumbsProps) {
  return (
    <nav 
      aria-label="Breadcrumb" 
      className={clsx("flex items-center gap-1 text-body-sm", className)}
    >
      <Link
        href="/"
        className="flex items-center gap-1 text-foreground-muted hover:text-foreground transition-colors"
      >
        <Home className="w-4 h-4" />
        <span className="sr-only">Home</span>
      </Link>

      {items.map((item, index) => {
        const isLast = index === items.length - 1
        
        return (
          <div key={index} className="flex items-center gap-1">
            <ChevronRight className="w-4 h-4 text-foreground-subtle" />
            {isLast || !item.href ? (
              <span className={clsx(
                isLast ? "text-foreground font-medium" : "text-foreground-muted"
              )}>
                {item.label}
              </span>
            ) : (
              <Link
                href={item.href}
                className="text-foreground-muted hover:text-foreground transition-colors"
              >
                {item.label}
              </Link>
            )}
          </div>
        )
      })}
    </nav>
  )
}