import type { ReactNode } from 'react';
import { TextLink } from '../core/TextLink';

export interface HeroLink {
  label: string;
  href: string;
}

export interface HeroImage {
  src: string;
  alt: string;
  /** Small uppercase caption under the image. */
  caption?: string;
}

export interface HeroProps {
  /** Small muted line above the headline, e.g. "Komplettset für den VW Touran 5T1". */
  eyebrow?: string;
  /** The product headline: two short sentences, product first, benefit second. */
  title: ReactNode;
  /** Muted lead paragraph (18-23px). */
  lead?: ReactNode;
  /** Blue standalone links under the lead; each gets a trailing chevron. */
  links?: HeroLink[];
  /** Product photo on white with optional caption, max 860px wide. */
  image?: HeroImage;
}

/**
 * Opening hero (`.kwac-hero`): centered eyebrow, oversized bold headline
 * (`.kwac-h1`, up to 72px, tight tracking), muted lead, a row of `TextLink`s and
 * the hero product image with an uppercase caption. Place directly after `VehicleBar`.
 */
export function Hero({ eyebrow, title, lead, links, image }: HeroProps) {
  return (
    <section className="kwac-hero" aria-labelledby="kwac-title">
      {eyebrow ? <p className="kwac-eyebrow">{eyebrow}</p> : null}
      <h1 className="kwac-h1" id="kwac-title">
        {title}
      </h1>
      {lead ? <p className="kwac-lead">{lead}</p> : null}
      {links && links.length ? (
        <div className="kwac-hero-links">
          {links.map((l) => (
            <TextLink key={l.href + l.label} href={l.href}>
              {l.label}
            </TextLink>
          ))}
        </div>
      ) : null}
      {image ? (
        <figure className="kwac-hero-figure">
          <img src={image.src} alt={image.alt} />
          {image.caption ? <figcaption>{image.caption}</figcaption> : null}
        </figure>
      ) : null}
    </section>
  );
}