import Link from 'next/link'
import clsx from 'clsx'
import { BreadcrumbSchema } from './schema/Breadcrumb'

interface BreadcrumbItem {
  name: string
  url: string
}

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

export function Breadcrumbs({ items, className, hideCurrentOnMobile = false }: BreadcrumbsProps) {
  const origin = (process.env.NEXT_PUBLIC_SITE_URL ?? 'https://arter.dev').replace(/\/$/, '')

  const absoluteItems = items.map((item) => ({
    name: item.name,
    url: item.url.startsWith('http') ? item.url : `${origin}${item.url}`,
  }))

  const lastIndex = items.length - 1

  return (
    <>
      <BreadcrumbSchema items={absoluteItems} />
      <nav aria-label="Breadcrumb" className={clsx('not-prose', className)}>
        <ol className="m-0 flex list-none flex-wrap items-center gap-x-2 gap-y-1 p-0 font-mono text-[11px] tracking-widest uppercase">
          {items.map((item, i) => {
            const isLast = i === lastIndex
            const hideOnMobile = isLast && hideCurrentOnMobile && items.length > 1
            return (
              <li
                key={item.url}
                className={clsx(
                  'min-w-0 items-center gap-2',
                  hideOnMobile ? 'hidden md:flex' : 'flex',
                )}
              >
                {i > 0 && (
                  <span aria-hidden="true" className="text-ink-4 select-none">
                    /
                  </span>
                )}
                {isLast ? (
                  <span
                    aria-current="page"
                    className="text-ink inline-flex max-w-[36ch] items-baseline gap-1.5 truncate"
                  >
                    <span aria-hidden="true" className="text-ink-4 font-normal">
                      [
                    </span>
                    <span className="truncate">{item.name}</span>
                    <span aria-hidden="true" className="text-ink-4 font-normal">
                      ]
                    </span>
                  </span>
                ) : (
                  <Link
                    href={item.url}
                    className="text-ink-3 hover:text-ink focus-visible:text-ink no-underline transition-colors focus-visible:outline-none"
                  >
                    {item.name}
                  </Link>
                )}
              </li>
            )
          })}
        </ol>
      </nav>
    </>
  )
}