"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;
}

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

  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>
  );
}