import React, { useState } from 'react';
import VoteCard from '../VoteCard/VoteCard';
import styles from './VotingBoard.module.css';
import { submitVote } from '../../services/voteService';

const fibonacciNumbers = [0, 1, 2, 3, 5, 8, 13, 21, 9999];

const VotingBoard = () => {
    const [selectedVote, setSelectedVote] = useState(null);

    const handleVote = (number) => {
        setSelectedVote(number);
        submitVote("user-id", number);
    };

    return (
        <div className={styles.votingBoard}>
            <h2>Select Your Vote</h2>
            <div className={styles.voteCards}>
                {fibonacciNumbers.map(num => (
                    <VoteCard 
                        key={num} 
                        number={num} 
                        onClick={() => handleVote(num)} 
                        isSelected={selectedVote === num}
                        isCoffee={num === 0}
                        isInfinity={num === 9999}
                    />
                ))}
            </div>
        </div>
    );
};

export default VotingBoard;
