import React, { useEffect, useState } from 'react';
import VoteValue from '../VoteValue';
import cardBack from '../../assets/images/cardback.png';
import cardFront from '../../assets/images/cardfront.png';
import styles from './BoardCard.module.css';

const BoardCard = ({ vote, isDimmed, isRevealed = true }) => {
  const [isFlipped, setIsFlipped] = useState(false);

  useEffect(() => {
    if (isRevealed) {
      setTimeout(() => setIsFlipped(true), 300);
    } else if (isFlipped) {
      setIsFlipped(false);
    }
  }, [isFlipped, isRevealed]);

  return (
    <div className={`${isDimmed ? styles.isDimmed : ''} ${styles.boardCard}`}>
      <div className={`${styles.card} ${isFlipped ? styles.flip : ''}`}>
        <img className={styles.cardBack} src={cardBack} alt="card-back" />
        <img className={styles.cardFront} src={cardFront} alt="card-front" />
        <VoteValue className={styles.vote} value={vote} />
      </div>
    </div>
  );
};

export default BoardCard;
