// src/components/shell/Breadcrumbs.tsx
// Input: array of {label, href?} items
// Output: breadcrumb trail separated by /
// Rationale: reusable for all pages, injected into Topbar children slot

import Link from 'next/link'
import { cn } from '@/lib/utils'

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={cn('flex items-center gap-1 min-w-0', className)}>
      {items.map((item, index) => {
        const isLast = index === items.length - 1
        return (
          <span key={index} className="flex items-center gap-1 min-w-0">
            {index > 0 && (
              <span className="text-text-muted text-caption select-none">/</span>
            )}
            {item.href && !isLast ? (
              <Link
                href={item.href}
                className="text-caption text-text-secondary hover:text-text-primary transition-colors duration-fast truncate"
              >
                {item.label}
              </Link>
            ) : (
              <span
                className={cn(
                  'text-caption truncate',
                  isLast ? 'text-text-primary' : 'text-text-secondary'
                )}
              >
                {item.label}
              </span>
            )}
          </span>
        )
      })}
    </nav>
  )
}