import { useState } from "react";
import "./Collapse.scss";
import CollapseProps from "./Collapse.inreface";

const Collapse = ({ name, content }: CollapseProps) => {
  const [collapsed, setCollapsed] = useState<boolean>(false);

  return (
    <>
      <button
        type="button"
        className="collapsible"
        onClick={() => setCollapsed(!collapsed)}
      >
        {name}
      </button>
      <div className={`content ${!collapsed && "hidden"}`}>{content}</div>
    </>
  );
};

export default Collapse;