import styles from './collapse.module.scss'
import {FC, useState} from "react";
import {View} from "@tarojs/components";
import Icon from "@/components/icon";

interface Props {
  title: string
  children?: JSX.Element | string
  onChange?: () => void
}


const Collapse: FC<Props> = (props: Props) => {
  const [show, setShow] = useState(false)

  return (
    <>
      <View className={styles.collapse} onClick={() => setShow(!show)}>
        <View>{props.title}</View>
        <Icon name={show ? 'chevron-up' : 'chevron-down'}/>
      </View>
      <View className={`${styles.children} ${show ? styles.open : styles.close}`}>
        {props?.children}
      </View>
    </>
  )
}

export default Collapse
