import { Check } from "lucide-react";

import type { TipCoffeeType } from "@/lib/tip/tip_coffee";

import styles from "./tip-screen.module.css";

export interface TipCoffeeTierItem {
  type: TipCoffeeType;
  displayName: string;
  priceLabel: string;
  unavailable: boolean;
}

interface TipCoffeeTierSelectorProps {
  disabled: boolean;
  items: readonly TipCoffeeTierItem[];
  onChange: (type: TipCoffeeType) => void;
  selectedType: TipCoffeeType;
}

export function TipCoffeeTierSelector({
  disabled,
  items,
  onChange,
  selectedType,
}: TipCoffeeTierSelectorProps) {
  return (
    <fieldset className={styles.tierSelector} disabled={disabled}>
      <legend className={styles.tierLegend}>Choose your coffee</legend>
      <div className={styles.tierList}>
        {items.map((item) => {
          const isSelected = item.type === selectedType;

          return (
            <label
              key={item.type}
              className={styles.tierOption}
              data-selected={isSelected ? "true" : "false"}
              data-unavailable={item.unavailable ? "true" : "false"}
            >
              <input
                type="radio"
                name="tip-coffee-tier"
                value={item.type}
                checked={isSelected}
                disabled={item.unavailable}
                className={styles.tierInput}
                data-analytics-key={`tip.select_${item.type}`}
                data-analytics-label={`Select ${item.displayName}`}
                onChange={() => onChange(item.type)}
              />
              <span className={styles.tierDetails}>
                <span className={styles.tierName}>{item.displayName}</span>
              </span>
              <span className={styles.tierPriceBlock}>
                <span className={styles.tierPrice}>{item.priceLabel}</span>
                {item.unavailable ? (
                  <span className={styles.tierUnavailable}>Unavailable</span>
                ) : null}
              </span>
              <span className={styles.tierCheck} aria-hidden="true">
                {isSelected ? <Check size={16} strokeWidth={3} /> : null}
              </span>
            </label>
          );
        })}
      </div>
    </fieldset>
  );
}