import Link from 'next/link'
import React from 'react'

type BreadcrumbItem = {
  label: string
  href?: string
}

export const Breadcrumb: React.FC<{ items: BreadcrumbItem[] }> = ({ items }) => {
  return (
    <nav className="flex flex-wrap items-center gap-1 text-sm text-muted-foreground mb-4">
      {items.map((item, i) => {
        const isLast = i === items.length - 1
        return (
          <React.Fragment key={i}>
            {i > 0 && <span className="select-none opacity-50">›</span>}
            {isLast || !item.href ? (
              <span className={isLast ? 'text-foreground' : ''}>{item.label}</span>
            ) : (
              <Link href={item.href} className="hover:text-foreground transition-colors">
                {item.label}
              </Link>
            )}
          </React.Fragment>
        )
      })}
    </nav>
  )
}