import React from 'react';

import styles from './VoteCard.module.css';
import FrontCard from '../FrontCard/FrontCard';

const VoteCard = ({ number, isSelected, onClick, className }) => {
  return (
    <button
      className={`${styles.voteCard} ${isSelected ? styles.selected : ''} ${styles['cardo-regular']} ${className}`}
      onClick={() => onClick(number)}
    >
      <FrontCard
        className={`${styles.frontCard} ${isSelected && styles.selected}`}
        value={number}
      />
      <div className={`${styles.shadow} ${isSelected && styles.selected}`} />
    </button>
  );
};

export default VoteCard;
