import React, { useMemo, useState } from "react";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import styles from './CollapseBtn.less';

export const CollapseBtn = ({
  text,
  onChange,
}: {
  text: string;
  onChange: Function;
}) => {
  const [isCollapse, setCollapse] = useState(false);

  return (
    <span
      className={styles.wrapper}
      onClick={() => {
        if (onChange(!isCollapse)) {
          setCollapse(!isCollapse);
        }
      }}
    >
      <span>{text}</span>
      <span className={styles.icon}>
        {isCollapse ? <UpOutlined /> : <DownOutlined />}
      </span>
    </span>
  );
};