import { StarIcon as OutlineStarIcon } from '@heroicons/react/outline';
import { StarIcon as SolidStarIcon } from '@heroicons/react/solid';
import PropTypes from 'prop-types';

function StarIcon({ star, onUpdate }) {
  return star ? (
    <SolidStarIcon
      width={30}
      onClick={onUpdate}
      className='text-yellow-300 hover:text-yellow-400'
    />
  ) : (
    <OutlineStarIcon width={30} onClick={onUpdate} className='text-gray-300 hover:text-gray-400' />
  );
}

StarIcon.propTypes = {
  star: PropTypes.bool.isRequired,
  onUpdate: PropTypes.func.isRequired
};

export default StarIcon;
