import { useState } from 'react';

export const Spoiler = ({ header = null, open = true, children }) => {
  const [isContentVisible, setIsContentVisible] = useState(open);

  const handleHeaderClick = () => {
    setIsContentVisible(!isContentVisible);
  };

  return (
    <div>
      <div onClick={handleHeaderClick}>
        {header}
        <button>{isContentVisible ? '-' : '+'}</button>
      </div>
      {isContentVisible ? children : null}
    </div>
  );
};
