import { Check } from "lucide-react";

import type { GiftProduct } from "@/data/schemas/payment";

import { formatGiftPrice } from "./tip-screen.helpers";
import styles from "./tip-screen.module.css";

interface TipGiftProductSelectorProps {
  disabled: boolean;
  products: readonly GiftProduct[];
  onChange: (planId: string) => void;
  selectedPlanId: string;
}

export function TipGiftProductSelector({
  disabled,
  products,
  onChange,
  selectedPlanId,
}: TipGiftProductSelectorProps) {
  return (
    <fieldset className={styles.tierSelector} disabled={disabled}>
      <legend className={styles.visuallyHidden}>Choose a gift</legend>
      <div className={styles.tierList}>
        {products.map((product) => {
          const isSelected = product.planId === selectedPlanId;

          return (
            <label
              key={product.planId}
              className={styles.tierOption}
              data-selected={isSelected ? "true" : "false"}
            >
              <input
                type="radio"
                name="tip-gift-product"
                value={product.planId}
                checked={isSelected}
                className={styles.tierInput}
                data-analytics-key="tip.select_product"
                data-analytics-label={`Select ${product.planName}`}
                onChange={() => onChange(product.planId)}
              />
              <span className={styles.tierDetails}>
                <span className={styles.tierName}>{product.planName}</span>
              </span>
              <span className={styles.tierPriceBlock}>
                <span className={styles.tierPrice}>
                  {formatGiftPrice(product.amountCents, product.currency)}
                </span>
              </span>
              <span className={styles.tierCheck} aria-hidden="true">
                {isSelected ? <Check size={16} strokeWidth={3} /> : null}
              </span>
            </label>
          );
        })}
      </div>
    </fieldset>
  );
}
