import React from 'react'

import styles from './todoCard.module.css'

export default function TodoCard(props) {
  const { categories, onClick, userId } = props
  const { name, category, points, votes, id, group } = props.cardData
  const voted = votes.includes(userId)

  return (
    <div
      className={styles.card}
      style={{
        border: `1px solid ${group || '#f2cb05'}`,
      }}
      onClick={() => {
        onClick(props.cardData)
      }}
    >
      <div className={styles.description}>
        <span className={styles.id}>{`#${id}`}</span>
        {name}
      </div>
      <div className={styles.category}>
        <span
          style={{
            backgroundColor: categories[category].color,
            color: 'white',
            borderRadius: '2px',
            padding: '3px',
          }}
        >
          {categories[category].name}
        </span>
      </div>
      <div className={styles.numbers}>
        <div
          className={`${voted && styles.voted}`}
        >{`Szavazatok: ${votes.length}`}</div>
        <div>{`Nehézség: ${points}`}</div>
      </div>
    </div>
  )
}