import React from 'react';
import { DownOutlined } from '@easyv/react-icons';
import classnames from 'classnames';

export interface CollapseBoxProp {
  title: string;
  tltleSuffix?: React.ReactNode;
  titleClassName?: string;
  titleExtra?: React.ReactNode;
  showContextBorder?: boolean;
  children?: React.ReactNode;
}

export default function CollapseBox({
  title,
  tltleSuffix,
  titleClassName,
  titleExtra,
  showContextBorder = false,
  children,
}: CollapseBoxProp) {
  const [listOpen, setListOpen] = React.useState<boolean>(true);

  return (
    <div>
      <div
        className={classnames(
          'h-7 px-4 py-1 bg-bgColorSecondary text-white cursor-pointer flex justify-between',
          titleClassName,
        )}
        onClick={() => setListOpen(!listOpen)}>
        <div className="inline-flex gap-x-2 items-center">
          <DownOutlined
            className="text-xs transition-all anticon"
            style={{
              transform: listOpen ? 'rotate(0deg)' : 'rotate(-90deg)',
            }}
          />
          <span>{title}</span>
          <span>{tltleSuffix}</span>
        </div>
        <div className="inline-flex items-center">{titleExtra}</div>
      </div>
      {listOpen && (
        <div
          className={classnames({
            'border-l border-l-1 border-borderColorBase p-2': showContextBorder,
          })}>
          {children}
        </div>
      )}
    </div>
  );
}