import React from "react";
import Link from "next/link";
import Image from "next/image";

export interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbProps {
  /** Trail after the home icon — the last entry renders unlinked as the current page. */
  items: BreadcrumbItem[];
}

/**
 * Mirrors the live `mod_breadcrumbs` override: a home icon linking to `/`,
 * then the trail, with the current page unlinked and in brand green
 * (`.active-breadcrumb`, `#5c7a36`). The schema.org BreadcrumbList microdata
 * is part of that markup too, so it's kept here rather than dropped.
 */
export const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
  return (
    <div className="px-4 sm:px-6 lg:px-8 py-1.5">
      <ul
        className="max-w-6xl mx-auto flex flex-wrap items-center text-xs text-black"
        itemScope
        itemType="https://schema.org/BreadcrumbList"
      >
        <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem" className="inline-flex items-center">
          <Link href="/" itemProp="item" aria-label="Home" className="inline-flex items-center text-black">
            <meta itemProp="name" content="Home" />
            <Image src="/icons/breadcrumb-home.svg" alt="" width={16} height={14} className="w-4 h-3.5" />
          </Link>
          <meta itemProp="position" content="1" />
          <Image src="/icons/breadcrumb-arrow.png" alt="" width={10} height={10} className="w-2.5 h-2.5 mx-1.5" />
        </li>

        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <li
              key={item.label}
              itemProp="itemListElement"
              itemScope
              itemType="https://schema.org/ListItem"
              className={`inline-flex items-center ${isLast ? "text-[#5c7a36]" : "text-black"}`}
              {...(isLast ? { "aria-current": "page" as const } : {})}
            >
              {isLast || !item.href ? (
                <span itemProp="name">{item.label}</span>
              ) : (
                <Link href={item.href} itemProp="item" className="text-black">
                  <span itemProp="name">{item.label}</span>
                </Link>
              )}
              <meta itemProp="position" content={String(index + 2)} />
              {!isLast && (
                <Image src="/icons/breadcrumb-arrow.png" alt="" width={10} height={10} className="w-2.5 h-2.5 mx-1.5" />
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
};