import React from 'react';
import type { Tier } from '../App';
import type { Upgrades } from './GubbleStore';
import ScratchFieldButton from './ScratchFieldButton';

type CardProps = {
  card: {
    winningNumbers: number[];
    fields: { value: number; scratched: boolean; won: number | null }[];
    tier: Tier | null;
  };
  setCard: React.Dispatch<React.SetStateAction<{
    winningNumbers: number[];
    fields: { value: number; scratched: boolean; won: number | null }[];
    tier: Tier | null;
  } | null>>;
  setMoney: React.Dispatch<React.SetStateAction<number>>;
  setGubblePoints: React.Dispatch<React.SetStateAction<number>>;
  upgrades?: Upgrades;
};

const Card: React.FC<CardProps> = ({ card, setCard, setMoney, setGubblePoints, upgrades }) => {
  const formatter = Intl.NumberFormat(
    'en', 
    { 'notation': 'compact' }
    )
  return (
    <div className="bg-gray-800 rounded-lg shadow-lg p-6 flex flex-col items-center mb-6 w-full max-w-md">
      <div className="mb-2 text-lg font-semibold text-gray-100">{card.tier?.name} Scratch Card</div>
      <div className="mb-4 flex gap-4 justify-center">
        {card.winningNumbers.map((num, i) => (
          <div key={i} className="w-12 h-12 flex items-center justify-center rounded-full bg-blue-900 text-blue-300 text-xl font-bold border-2 border-blue-700">
            {num}
          </div>
        ))}
      </div>
      <div className="grid grid-cols-3 gap-4 mb-2">
        {card.fields.map((field, idx) => (
          <ScratchFieldButton
            key={idx}
            field={field}
            idx={idx}
            card={card}
            setCard={setCard}
            setMoney={setMoney}
            setGubblePoints={setGubblePoints}
            upgrades={upgrades}
            formatter={formatter}
          />
        ))}
      </div>
      <div className="text-xs text-gray-400">Scratch each field one at a time. Winnings: 1-2 = 50%, 3-4 = 80%, 5-6 = 120% of card price.</div>
    </div>
  );
};

export type { CardProps };
export default React.memo(Card);