import React, { useState } from "react";
import classNames from "classnames";
import useIsRtl from "../../particles/hooks/useIsRtl";

import styles from "./Collapse.module.scss";

const Collapse = ({ name, description }: any) => {
  const isRtl = useIsRtl();

  const [collapsed, setCollapsed] = useState(true);

  const toggle = () => setCollapsed((state) => !state);

  return (
    <article className={classNames(styles.collapse, { collapsed, notCollapsed: !collapsed })}>
      <button onClick={toggle} className="box mb-4 ltr:text-left rtl:text-right">
        {name} &nbsp;
        {collapsed ? isRtl ? <span>&#9666;</span> : <span>&#9656;</span> : <span>&#9662;</span>}
      </button>

      <div className="description mb-4" dangerouslySetInnerHTML={{ __html: description }}></div>
    </article>
  );
};

export default Collapse;