// VSE AI · PromoBanner.tsx
// Narrow promo strip on home. Click opens the full-screen PlusBanner.
// Import banners.css alongside this component.

import React from "react";

export type PromoVariantId = "A" | "B" | "C" | "D";
export type PromoTone = "cyan" | "gold";

export interface PromoVariantData {
  id: PromoVariantId;
  /** Plain text label, may include the strike-through span as a separate field below. */
  label: string;
  /** Optional struck-through old price shown after the label. */
  strike?: string;
  /** "cyan" for the default cyan style, "gold" for the trigger (variant D). */
  tone: PromoTone;
  /** Icon glyph — defaults to ✦ for cyan, 🎁 for gold. */
  star?: string;
}

export interface PromoBannerProps {
  variant: PromoVariantData;
  onClick?: (variantId: PromoVariantId) => void;
}

export const PromoBanner: React.FC<PromoBannerProps> = ({ variant, onClick }) => {
  const star = variant.star ?? (variant.tone === "gold" ? "🎁" : "✦");
  return (
    <div
      className={variant.tone === "gold" ? "promo-banner gold" : "promo-banner"}
      role="button"
      tabIndex={0}
      onClick={() => onClick?.(variant.id)}
      onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && onClick?.(variant.id)}
    >
      <div className="pb-left">
        <span className="star">{star}</span>
        <span>{variant.label}</span>
        {variant.strike && <span className="strike">{variant.strike}</span>}
      </div>
      <div className="pb-arrow">{"→"}</div>
    </div>
  );
};

export default PromoBanner;