import React from 'react';
import cardBack from '../../assets/images/cardback.png';
import { ReactComponent as BracketIcon } from '../../assets/images/bracket.svg';
import FrontCard from '../FrontCard/FrontCard';
import styles from './BoardCard.module.css';

const BoardCard = ({ username, vote, isRevealed, isDimmed, isHighlighted }) => {
  return (
    <div className={`${styles.boardCard}`}>
      <div className={styles.highlightIconContainer}>
        {isHighlighted ? <BracketIcon /> : null}
      </div>
      <div
        className={`${styles.card} ${isRevealed ? styles.flip : ''} ${isDimmed && styles.dimmed}`}
      >
        <img src={cardBack} alt="Card Back" />
        <div className={styles.front}>
          <FrontCard value={vote} />
        </div>
      </div>
      <div className={styles.username}>{username}</div>
    </div>
  );
};

export default BoardCard;
