import Link from "next/link"
import { ChevronRight, Home } from "lucide-react"
import { businessConfig } from "@/lib/seo-config"

interface BreadcrumbItem {
  label: string
  href: string
}

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

/**
 * Breadcrumb Navigation Component
 * Implements BreadcrumbList schema markup for SEO and navigation clarity
 * Helps search engines understand page hierarchy
 */
export function Breadcrumbs({ items, className = "" }: BreadcrumbsProps) {
  // Build breadcrumb list for schema
  const breadcrumbList = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      {
        "@type": "ListItem",
        position: 1,
        name: "Home",
        item: businessConfig.website,
      },
      ...items.map((item, index) => ({
        "@type": "ListItem",
        position: index + 2,
        name: item.label,
        item: item.href.startsWith("http")
          ? item.href
          : `${businessConfig.website}${item.href}`,
      })),
    ],
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbList) }}
      />
      <nav
        className={`flex items-center gap-2 text-sm text-muted-foreground ${className}`}
        aria-label="Breadcrumb"
      >
        <Link
          href="/"
          className="hover:text-foreground transition-colors flex items-center gap-1"
          aria-label="Home"
        >
          <Home className="h-4 w-4" />
        </Link>
        {items.map((item, index) => (
          <div key={index} className="flex items-center gap-2">
            <ChevronRight className="h-4 w-4" />
            {index === items.length - 1 ? (
              <span className="text-foreground font-medium" aria-current="page">
                {item.label}
              </span>
            ) : (
              <Link
                href={item.href}
                className="hover:text-foreground transition-colors"
              >
                {item.label}
              </Link>
            )}
          </div>
        ))}
      </nav>
    </>
  )
}