import { LightBulbIcon as OutlineLightBulbIcon } from '@heroicons/react/outline';
import { LightBulbIcon as SolidLightBulbIcon } from '@heroicons/react/solid';
import PropTypes from 'prop-types';

function HideIcon({ hide, onUpdate }) {
  return hide ? (
    <OutlineLightBulbIcon
      width={30}
      onClick={onUpdate}
      className='text-gray-300 hover:text-gray-400'
    />
  ) : (
    <SolidLightBulbIcon
      width={30}
      onClick={onUpdate}
      className='text-yellow-300 hover:text-yellow-400'
    />
  );
}

HideIcon.propTypes = {
  hide: PropTypes.bool.isRequired,
  onUpdate: PropTypes.func.isRequired
};

export default HideIcon;
