import React from 'react';

import { ButtonShape, ButtonVariant } from '@/components/button/Button';
import { CreditPack } from '@/state/sessionStore';

import { ModalButton } from '../../shared/ModalButton';

interface Props {
  packs: CreditPack[];
  selectedPack: CreditPack | null;
  onSelect(pack: CreditPack | null): void;
  onContinue(): void;
}

const CreditsSelectStep: React.FC<Props> = ({
  packs,
  selectedPack,
  onSelect,
  onContinue,
}) => {
  const clickCreditPack = (pack: CreditPack) => {
    if (selectedPack && selectedPack.amount === pack.amount) {
      onSelect(null);
    } else {
      onSelect(pack);
    }
  };

  return (
    <div>
      <div className='flex flex-col gap-2'>
        {packs.map((pack) => (
          <ModalButton
            key={pack.amount}
            className={
              pack.amount === selectedPack?.amount
                ? 'bg-white text-black'
                : undefined
            }
            variant={ButtonVariant.Secondary}
            shape={ButtonShape.Rounded}
            onClick={() => clickCreditPack(pack)}
          >
            {pack.amount} credits - ${pack.price_usd}.00
          </ModalButton>
        ))}
      </div>

      <div className='mt-6 flex justify-center gap-3'>
        <ModalButton
          variant={ButtonVariant.Primary}
          onClick={onContinue}
          disabled={!selectedPack}
        >
          Continue
        </ModalButton>
      </div>
    </div>
  );
};

export default CreditsSelectStep;