import Link from "next/link";
import { IoChevronForward } from "react-icons/io5";

const BASE_URL = "https://trptk.com";

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

export function Breadcrumb({ crumbs }: { crumbs: Crumb[] }) {
  if (crumbs.length === 0) return null;

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: crumbs.map((crumb, i) => ({
      "@type": "ListItem",
      position: i + 1,
      name: crumb.label,
      item: `${BASE_URL}${crumb.href}`,
    })),
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }}
      />
      <nav className="mb-2 flex items-center gap-1 text-xs text-lightsec dark:text-darksec">
        {crumbs.map((crumb, i) => (
          <span key={crumb.href} className="flex items-center gap-1">
            {i > 0 && <IoChevronForward className="opacity-50" />}
            <Link
              href={crumb.href}
              className="transition-colors duration-200 hover:text-trptkblue dark:hover:text-white"
            >
              {crumb.label}
            </Link>
          </span>
        ))}
      </nav>
    </>
  );
}