import React, { useState } from 'react';
import api from '../../services/api'; // Import your Axios instance from `api.js`
import VoteCard from '../VoteCard';
import styles from './VotingBoard.module.css';

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

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

  const handleVote = async (number) => {
    setSelectedVote(number);

    try {
      // Send the vote to your server via POST request using the `api.js` instance
      await api.post(`/session/${sessionId}/votes`, {
        userId,
        vote: number,
      });

      console.log('Vote submitted successfully');
    } catch (error) {
      console.error('Error submitting vote:', error);
    }
  };

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

export default VotingBoard;
