import React, { useState, useCallback } from "react";
import Button, { ButtonType } from "./Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";

interface ExpandoProps {
  name: string;
  title: JSX.Element;
  children: JSX.Element;
  error: string;
}

const Expando: React.FC<ExpandoProps> = ({ title, children }) => {
  const [expanded, setExpanded] = useState(false);

  const open = useCallback(() => setExpanded(true), []);
  const close = useCallback(() => setExpanded(false), []);

  return (
    <div>
      {!expanded && (
        <Button buttonType={ButtonType.secondary} onClick={open}>
          {title} <FontAwesomeIcon icon={faCaretDown} />
        </Button>
      )}

      {expanded && (
        <div>
          <Button buttonType={ButtonType.secondary} onClick={close}>
            {title} <FontAwesomeIcon icon={faCaretUp} />
          </Button>
          {children}
        </div>
      )}
    </div>
  );
};

export default Expando;