import ExclamationIcon from '@heroicons/react/outline/ExclamationIcon';
import PropTypes from 'prop-types';
import { useState } from 'react';
import ReportModal from '../report-modal';

function ReportIcon({ cardId }) {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <ExclamationIcon
        width={30}
        onClick={() => setShowModal(!showModal)}
        className='text-orange-400 hover:text-orange-500'
      />
      {showModal && (
        <ReportModal cardId={cardId} showModal={showModal} onClose={() => setShowModal(false)} />
      )}
    </>
  );
}

ReportIcon.propTypes = {
  cardId: PropTypes.number.isRequired
};

export default ReportIcon;
