import Link from "next/link";
import type { ReactNode } from "react";
import { ChevronLeft } from "lucide-react";

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

type ServiceFlowHeroProps = {
  currentPage: ReactNode;
  eyebrow: ReactNode;
  title: ReactNode;
  lead: ReactNode;
  backHref?: string;
  backLabel?: string;
};

export function ServiceFlowHero({
  currentPage,
  eyebrow,
  title,
  lead,
  backHref,
  backLabel = "Back",
}: ServiceFlowHeroProps) {
  return (
    <section className="bg-primary font-['Space_Grotesk'] text-primary-foreground">
      <div className="mx-auto max-w-7xl px-4 pb-8 pt-24 2xl:pb-10 2xl:pt-28">
        <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>
              <BreadcrumbLink asChild className="hover:text-primary-foreground">
                <Link href={routePath("/services")}>Services</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator className="text-primary-foreground/50" />
            <BreadcrumbItem>
              <BreadcrumbPage className="text-primary-foreground">{currentPage}</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        {backHref ? (
          <Link
            href={routePath(backHref)}
            className="mt-8 inline-flex items-center gap-2 text-sm font-black text-primary-foreground/80 transition hover:text-primary-foreground"
          >
            <ChevronLeft className="h-4 w-4" />
            {backLabel}
          </Link>
        ) : null}

        <div className={backHref ? "mt-5 max-w-3xl" : "mt-8 max-w-3xl 2xl:mt-10"}>
          <p className="text-xs font-black uppercase tracking-[0.18em] text-primary-foreground/75">
            {eyebrow}
          </p>
          <h1 className="mt-2 max-w-3xl font-display text-3xl font-bold leading-tight tracking-tight sm:text-4xl 2xl:text-5xl">
            {title}
          </h1>
          <p className="mt-3 max-w-2xl text-sm font-semibold leading-relaxed text-primary-foreground/85 sm:text-base 2xl:text-lg">
            {lead}
          </p>
        </div>
      </div>
    </section>
  );
}