import type { ReactNode } from 'react';

export interface DetailCardProps {
  /** Product image, shown 4:3 contained on a white inset with 14px radius. */
  src: string;
  alt: string;
  /** Tiny uppercase manufacturer line above the title, e.g. "Auto Hak". */
  kicker?: string;
  /** Bold 22px title. */
  title: string;
  /** Muted description. */
  children: ReactNode;
}

/**
 * Light-gray rounded card (`.kwac-detail-card`, white on `alt` bands) that
 * presents one component of the kit: image on a white inset, uppercase kicker,
 * bold title and muted copy. Child of `DetailGrid`.
 */
export function DetailCard({ src, alt, kicker, title, children }: DetailCardProps) {
  return (
    <article className="kwac-detail-card">
      <img src={src} alt={alt} />
      {kicker ? <p className="kwac-detail-kicker">{kicker}</p> : null}
      <h3>{title}</h3>
      <p>{children}</p>
    </article>
  );
}