import {PropsWithChildren, useState} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faChevronDown, faChevronUp} from "@fortawesome/free-solid-svg-icons";

import styles from './dropdown-section.module.scss';

/* eslint-disable-next-line */
export interface DropdownComponentProps extends PropsWithChildren {
  title?: string;
  collapse?: boolean;
}

export function DropdownSection({children, title = '', collapse = false}: DropdownComponentProps) {
  const [visible, setVisible] = useState(!collapse);
  return (
    <div className={styles['container']}>
      <header className="flex justify-between grow px-6 py-4 align-middle items-center cursor-pointer"
              onClick={() => setVisible(!visible)}>
        <h1 className="overflow-y-auto text-lg text-gray-600">{title}</h1>
        {visible && (<FontAwesomeIcon icon={faChevronDown} className="text-gray-600"/>)}
        {!visible && (<FontAwesomeIcon icon={faChevronUp} className="text-gray-600"/>)}
      </header>
      <main className={visible ? 'block' : 'hidden'}>
        {children}
      </main>
    </div>
  );
}

export default DropdownSection;