import type * as React from "react"
import { Link } from "react-router-dom"
import { ArrowRight } from "lucide-react"

import { IconBadge } from "@/components/solenos/icon-tile"
import { PageBreadcrumb } from "@/components/solenos/page-breadcrumb"
import { PageHero } from "@/components/solenos/page-hero"
import { Container, Section } from "@/components/solenos/section"

/**
 * Shared shell for the /wissen articles: split PageHero with the
 * Startseite → Wissen → article breadcrumb, then the article's own sections.
 */
function WissenArticle({
  breadcrumb,
  eyebrow,
  title,
  tagline,
  lead,
  visual,
  children,
}: {
  /** label of the current page, appended to Startseite → Wissen */
  breadcrumb: string
  eyebrow?: React.ReactNode
  title: React.ReactNode
  /** short bold subline under the H1 (e.g. "Für den Messbetrieb gebaut.") */
  tagline?: React.ReactNode
  lead?: React.ReactNode
  visual?: React.ReactNode
  children?: React.ReactNode
}) {
  return (
    <>
      <PageHero
        breadcrumb={
          <PageBreadcrumb
            items={[
              { label: "Startseite", to: "/" },
              { label: "Wissen", to: "/wissen" },
              { label: breadcrumb },
            ]}
          />
        }
        eyebrow={eyebrow}
        title={title}
        lead={
          <>
            {tagline ? (
              <span className="mb-2 block text-lg font-bold text-navy sm:text-xl">
                {tagline}
              </span>
            ) : null}
            {lead}
          </>
        }
        visual={visual}
      />
      <Container>{children}</Container>
    </>
  )
}

/** Baseline link to the sibling article, closing an article out. */
function WissenRelated({
  to,
  title,
  summary,
}: {
  to: string
  title: string
  summary: string
}) {
  return (
    <Section className="pt-0 sm:pt-0 lg:pt-0">
      <Link
        to={to}
        className="group flex items-center gap-6 rounded-3xl border border-border bg-card p-6 shadow-card transition-colors hover:border-brand-200 sm:p-8"
      >
        <div className="min-w-0 flex-1">
          <p className="text-xs font-bold tracking-[0.14em] text-primary uppercase">
            Weiterlesen
          </p>
          <h2 className="mt-2 text-xl font-extrabold tracking-tight text-balance text-navy">
            {title}
          </h2>
          <p className="mt-2 text-sm leading-relaxed text-pretty text-muted-foreground">
            {summary}
          </p>
        </div>
        <IconBadge
          variant="outline"
          size="lg"
          className="transition-transform group-hover:translate-x-0.5"
        >
          <ArrowRight />
        </IconBadge>
      </Link>
    </Section>
  )
}

export { WissenArticle, WissenRelated }