cozsweet-frontend-nextjs/src/app/chat/components/first-recharge-offer-banner.tsx

"use client";

import { ChevronRight, Sparkles, X } from "lucide-react";

import styles from "./first-recharge-offer-banner.module.css";

export interface FirstRechargeOfferBannerProps {
  visible: boolean;
  discountPercent: number;
  onClick: () => void;
  onClose: () => void;
  variant?: "banner" | "compact";
}

export function FirstRechargeOfferBanner({
  visible,
  discountPercent,
  onClick,
  onClose,
  variant = "banner",
}: FirstRechargeOfferBannerProps) {
  if (!visible) return null;

  if (variant === "compact") {
    return (
      <button
        type="button"
        data-analytics-key="chat.first_recharge_offer"
        data-analytics-label="Open first recharge offer"
        className={styles.compactButton}
        aria-label={`First recharge offer, ${discountPercent}% off`}
        onClick={onClick}
      >
        <span className={styles.compactIcon} aria-hidden="true">
          <Sparkles size={14} strokeWidth={2.4} />
        </span>
        <span className={styles.compactCopy}>
          <span>First recharge</span>
          <strong>{discountPercent}% OFF</strong>
        </span>
        <ChevronRight size={14} strokeWidth={2.4} aria-hidden="true" />
      </button>
    );
  }

  return (
    <section className={styles.banner} aria-label="First recharge offer">
      <button
        type="button"
        data-analytics-key="chat.first_recharge_offer"
        data-analytics-label="Open first recharge offer"
        className={styles.contentButton}
        onClick={onClick}
      >
        <span className={styles.iconWrap} aria-hidden="true">
          <Sparkles className={styles.icon} size={18} />
        </span>
        <span className={styles.copy}>
          <span className={styles.eyebrow}>First Recharge Offer</span>
          <span className={styles.title}>
            <strong>{discountPercent}% OFF</strong>
            <span>Claim your discount now</span>
          </span>
        </span>
        <ChevronRight className={styles.arrow} size={18} aria-hidden="true" />
      </button>

      <button
        type="button"
        className={styles.closeButton}
        onClick={onClose}
        aria-label="Hide first recharge offer"
      >
        <X size={16} aria-hidden="true" />
      </button>
    </section>
  );
}