import PropTypes from 'prop-types';
import StarIcon from './star';
import HideIcon from './hide';
import ReportIcon from './report';

function Icons({ cardId, rate, setRate }) {
  return (
    <div className='flex items-center justify-center gap-2'>
      {rate >= 0 && <StarIcon star={rate > 0} onUpdate={() => setRate(rate => 1 - rate)} />}
      {rate <= 0 && <HideIcon hide={rate < 0} onUpdate={() => setRate(rate => -1 - rate)} />}
      <ReportIcon cardId={cardId} />
    </div>
  );
}

Icons.propTypes = {
  cardId: PropTypes.number.isRequired,
  rate: PropTypes.number,
  setRate: PropTypes.func.isRequired
};

export default Icons;
