import { Collapse, Flex, Typography } from 'antd'
import { CaretLeftOutlined } from '@ant-design/icons'
import PropTypes from 'prop-types'

const { Title } = Typography

const InfoCollapse = ({
  title,
  icon,
  children,
  active,
  onToggle,
  className = '',
  collapseKey = 'default'
}) => {
  return (
    <Collapse
      ghost
      expandIconPosition='end'
      activeKey={active ? [collapseKey] : []}
      onChange={(keys) => onToggle(keys.length > 0)}
      expandIcon={({ isActive }) => (
        <CaretLeftOutlined rotate={isActive ? -90 : 0} />
      )}
      className={`no-h-padding-collapse ${className}`}
      items={[
        {
          key: collapseKey,
          children: children,
          label: (
            <Flex align='center' gap={'middle'}>
              {icon}
              <Title level={5} style={{ margin: 0 }}>
                {title}
              </Title>
            </Flex>
          )
        }
      ]}
    />
  )
}

InfoCollapse.propTypes = {
  title: PropTypes.string.isRequired,
  icon: PropTypes.node.isRequired,
  children: PropTypes.node.isRequired,
  active: PropTypes.bool.isRequired,
  onToggle: PropTypes.func.isRequired,
  className: PropTypes.string,
  collapseKey: PropTypes.string
}

export default InfoCollapse