import type { ReactNode } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Breadcrumbs, type BreadcrumbItem } from "@/components/breadcrumbs"
import {
  PublicInset,
  PublicPageHeader,
  PublicSurface,
} from "@/components/public-surface"
import { cn } from "@/lib/utils"

type ShellAction = {
  label: string
  href: string
  variant?: "default" | "outline"
}

interface DropdownPageShellProps {
  breadcrumbs: BreadcrumbItem[]
  eyebrow?: string
  title: string
  description?: string
  headerContent?: ReactNode
  content: ReactNode
  contentClassName?: string
  contentSurfaceClassName?: string
  sections?: ReactNode
  cta?: {
    eyebrow?: string
    title: string
    description: string
    actions: ShellAction[]
    note?: ReactNode
  }
  className?: string
}

export function DropdownPageShell({
  breadcrumbs,
  eyebrow,
  title,
  description,
  headerContent,
  content,
  contentClassName,
  contentSurfaceClassName,
  sections,
  cta,
  className,
}: DropdownPageShellProps) {
  return (
    <div className={cn("public-page", className)}>
      <Breadcrumbs className="mb-6" items={breadcrumbs} />

      <PublicPageHeader
        align="center"
        eyebrow={eyebrow}
        title={title}
        description={description}
      >
        {headerContent}
      </PublicPageHeader>

      <section className="mt-10">
        <PublicSurface
          className={cn("overflow-hidden", contentSurfaceClassName)}
        >
          <div className={cn("max-w-none", contentClassName)}>{content}</div>
        </PublicSurface>
      </section>

      {sections ? <div className="mt-12 space-y-12">{sections}</div> : null}

      {cta ? (
        <section className="mt-12">
          <PublicSurface className="text-center">
            {cta.eyebrow ? (
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
                {cta.eyebrow}
              </p>
            ) : null}
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
              {cta.title}
            </h2>
            <p className="mx-auto mt-4 max-w-2xl text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
              {cta.description}
            </p>
            <div className="mt-6 flex flex-col justify-center gap-3 sm:flex-row">
              {cta.actions.map((action) => (
                <Button
                  key={`${action.href}-${action.label}`}
                  asChild
                  size="lg"
                  variant={action.variant ?? "default"}
                  className="min-h-11 rounded-full px-6"
                >
                  <Link href={action.href}>{action.label}</Link>
                </Button>
              ))}
            </div>
            {cta.note ? (
              <PublicInset className="mx-auto mt-6 max-w-2xl text-left sm:text-center">
                {cta.note}
              </PublicInset>
            ) : null}
          </PublicSurface>
        </section>
      ) : null}
    </div>
  )
}