import LocalizedClientLink from "@modules/common/components/localized-client-link"
import React from "react"

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

type BreadcrumbProps = {
  crumbs: Crumb[]
}

const Breadcrumb: React.FC<BreadcrumbProps> = ({ crumbs }) => {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: crumbs.map((crumb, index) => ({
      "@type": "ListItem",
      position: index + 1,
      name: crumb.label,
      ...(crumb.href ? { item: crumb.href } : {}),
    })),
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <nav
        className="flex items-center gap-x-2 text-small-regular text-ui-fg-subtle mb-4"
        aria-label="Breadcrumb"
      >
        {crumbs.map((crumb, index) => (
          <React.Fragment key={index}>
            {index > 0 && <span>/</span>}
            {crumb.href ? (
              <LocalizedClientLink
                href={crumb.href}
                className="hover:text-ui-fg-base transition-colors"
              >
                {crumb.label}
              </LocalizedClientLink>
            ) : (
              <span className="text-ui-fg-base">{crumb.label}</span>
            )}
          </React.Fragment>
        ))}
      </nav>
    </>
  )
}

export default Breadcrumb
