'use client'

import React from 'react'
import Link from 'next/link'
import { cn } from '@/lib/utils'
import { CaretRight, House } from '@phosphor-icons/react'
import type { BreadcrumbItem } from '@/lib/docs/navigation'

/**
 * Breadcrumbs Component
 * 
 * Shows the current page location in the navigation hierarchy
 */

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

export function Breadcrumbs({ items, showHome = true, className }: BreadcrumbsProps) {
  if (items.length === 0) return null
  
  return (
    <nav className={cn('flex items-center text-sm', className)} aria-label="Breadcrumb">
      <ol className="flex items-center space-x-1">
        {showHome && (
          <>
            <li>
              <Link 
                href="/docs"
                className="text-muted-foreground hover:text-foreground transition-colors"
              >
                <House className="h-4 w-4" />
                <span className="sr-only">Home</span>
              </Link>
            </li>
            {items.length > 0 && (
              <li>
                <CaretRight className="h-4 w-4 text-muted-foreground/50" />
              </li>
            )}
          </>
        )}
        
        {items.map((item, index) => (
          <React.Fragment key={item.href}>
            <li>
              {index === items.length - 1 ? (
                <span className="text-foreground font-medium">
                  {item.title}
                </span>
              ) : item.href === '#' ? (
                <span className="text-muted-foreground">
                  {item.title}
                </span>
              ) : (
                <Link
                  href={item.href}
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  {item.title}
                </Link>
              )}
            </li>
            {index < items.length - 1 && (
              <li>
                <CaretRight className="h-4 w-4 text-muted-foreground/50" />
              </li>
            )}
          </React.Fragment>
        ))}
      </ol>
    </nav>
  )
}
