const { ChevronUpIcon, ChevronDownIcon } = require("@heroicons/react/24/outline");

const Disclosure = ({ label, active, onClick }) => (
  <div className={`flex justify-between p-4 ` + (active && 'bg-yellow_r-2')} onClick={onClick}>
    <p className="font-medium leading-normal">{ label }</p>
    { onClick && ( active ? (
      <ChevronUpIcon className="w-5 h-5 stroke-2" />
    ) : (
      <ChevronDownIcon className="w-5 h-5 stroke-2" />
    ) ) }
  </div>
);

export default Disclosure;