import React from 'react';
import styles from './Results.module.css';
import VoteValue from '../VoteValue/VoteValue';

const Results = ({ votes }) => {
  const voteCounts = Object.values(votes).reduce((acc, vote) => {
    acc[vote] = (acc[vote] || 0) + 1;
    return acc;
  }, {});

  return (
    <div className={styles.results}>
      <h2>Voting Results</h2>
      <div className={styles.list}>
        {Object.keys(voteCounts).map((vote, index) =>
          vote >= 0 ? (
            <div key={index} className={styles.pair}>
              <div className={styles.voteValueContainer}>
                <VoteValue className={styles.voteValue} value={vote} />
              </div>
              {' : '}
              {voteCounts[vote]} vote(s)
            </div>
          ) : null
        )}
      </div>
    </div>
  );
};

export default Results;
