import Link from "next/link";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { routePath } from "@/lib/route-url";

type BreadcrumbSectionProps = {
  title: string;
  currentPage: string;
  lead?: string;
  eyebrow?: string;
};

export function BreadcrumbSection({ title, currentPage, lead, eyebrow }: BreadcrumbSectionProps) {
  return (
    <section className="bg-primary font-['Space_Grotesk'] text-primary-foreground">
      <div className="mx-auto max-w-7xl px-4 pb-14 pt-28 2xl:pb-16 2xl:pt-32">
        <Breadcrumb>
          <BreadcrumbList className="text-primary-foreground/70">
            <BreadcrumbItem>
              <BreadcrumbLink asChild className="hover:text-primary-foreground">
                <Link href={routePath("/")}>Home</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator className="text-primary-foreground/50" />
            <BreadcrumbItem>
              <BreadcrumbPage className="text-primary-foreground">{currentPage}</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        {eyebrow ? (
          <p className="mt-8 text-xs font-semibold uppercase tracking-[0.18em] text-primary-foreground/75">
            {eyebrow}
          </p>
        ) : null}

        <h1 className="mt-3 max-w-3xl font-display text-3xl font-bold tracking-tight sm:text-4xl 2xl:text-5xl">
          {title}
        </h1>

        {lead ? (
          <p className="mt-4 max-w-2xl text-base leading-relaxed text-primary-foreground/80 2xl:text-lg">
            {lead}
          </p>
        ) : null}
      </div>
    </section>
  );
}