import React from 'react'

function Separator() {
  return (
    <svg
      className="h-3 w-3 flex-shrink-0 text-white/15"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
      aria-hidden="true"
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
    </svg>
  )
}

function Crumb({ href, children, current = false }) {
  const base = 'text-xs leading-none truncate max-w-[180px] sm:max-w-[260px]'
  if (current) {
    return (
      <span
        className={`${base} text-white/30`}
        aria-current="page"
      >
        {children}
      </span>
    )
  }
  return (
    <a
      href={href}
      className={`${base} text-white/30 hover:text-white/60 transition-colors duration-150`}
    >
      {children}
    </a>
  )
}

export default function ArtworkBreadcrumbs({ artwork }) {
  if (!artwork) return null

  // Use the first category for the content-type + category crumbs
  const firstCategory = artwork.categories?.[0] ?? null
  const contentTypeSlug = firstCategory?.content_type_slug || null
  const contentTypeName = contentTypeSlug
    ? contentTypeSlug.charAt(0).toUpperCase() + contentTypeSlug.slice(1)
    : null

  const categorySlug = firstCategory?.slug || null
  const categoryName = firstCategory?.name || null
  const categoryUrl = contentTypeSlug && categorySlug
    ? `/${contentTypeSlug}/${categorySlug}`
    : null

  return (
    <nav aria-label="Breadcrumb" className="mt-1.5 mb-0">
      <ol className="flex flex-wrap items-center gap-x-1 gap-y-1">
        {/* Home */}
        <li className="flex items-center gap-x-1.5">
          <Crumb href="/">Home</Crumb>
        </li>

        {/* Content type e.g. Photography */}
        {contentTypeSlug && (
          <>
            <li className="flex items-center"><Separator /></li>
            <li className="flex items-center gap-x-1.5">
              <Crumb href={`/${contentTypeSlug}`}>{contentTypeName}</Crumb>
            </li>
          </>
        )}

        {/* Category e.g. Landscapes */}
        {categoryUrl && (
          <>
            <li className="flex items-center"><Separator /></li>
            <li className="flex items-center gap-x-1.5">
              <Crumb href={categoryUrl}>{categoryName}</Crumb>
            </li>
          </>
        )}

        {/* Current artwork title — omitted: shown as h1 above */}
      </ol>
    </nav>
  )
}
