import type { ReactNode } from 'react';
import { Button } from '../core/Button';
import { Chip } from '../core/Chip';
import { cx } from '../_internal/cx';

export interface OfferCardProps {
  /** Chip label at the top, e.g. "Dieses Angebot" or "Mehr Komfort". */
  chip: string;
  /** Chip color; defaults to blue when `highlighted`, neutral otherwise. */
  chipTone?: 'blue' | 'neutral';
  /** Offer name, bold 23px. */
  title: string;
  /** Muted one-liner under the title. */
  subtitle?: ReactNode;
  /** Bullet lines; each gets a blue check mark. */
  bullets: string[];
  /** Button label at the bottom of the card. */
  buttonLabel: string;
  /** Button target. */
  buttonHref: string;
  /** Button style; defaults to primary when `highlighted`, ghost otherwise. */
  buttonVariant?: 'primary' | 'ghost';
  /** 2px blue outline marking the offer this listing is about (`.kwac-offer-this`). */
  highlighted?: boolean;
}

/**
 * White rounded offer card (`.kwac-offer`, 22px radius, 30px padding): `Chip`,
 * title, muted subtitle, check-marked bullet list (`.kwac-offer-list`) and a
 * `Button` pinned to the bottom. `highlighted` draws the 2px blue border of the
 * current offer. Child of `Offers`.
 */
export function OfferCard({
  chip,
  chipTone,
  title,
  subtitle,
  bullets,
  buttonLabel,
  buttonHref,
  buttonVariant,
  highlighted = false,
}: OfferCardProps) {
  const tone = chipTone ?? (highlighted ? 'blue' : 'neutral');
  const variant = buttonVariant ?? (highlighted ? 'primary' : 'ghost');
  return (
    <article className={cx('kwac-offer', highlighted && 'kwac-offer-this')}>
      <Chip tone={tone}>{chip}</Chip>
      <h3>{title}</h3>
      {subtitle ? <p className="kwac-offer-sub">{subtitle}</p> : null}
      <ul className="kwac-offer-list">
        {bullets.map((b) => (
          <li key={b}>{b}</li>
        ))}
      </ul>
      <Button variant={variant} href={buttonHref}>
        {buttonLabel}
      </Button>
    </article>
  );
}