import { Drawer } from 'antd'
import type { DrawerProps } from 'antd'
import type { PropsWithChildren, FC } from 'react'
import styles from './index.less'
type AnimateContentProps = {
  visible: boolean
  onVisibleChange: (visible: boolean) => void
  disableBreadcrumb?: boolean
} & Omit<DrawerProps, 'visible' | 'onVisibleChange'>

const AnimateContent: FC<PropsWithChildren<AnimateContentProps>> = ({
  visible,
  onVisibleChange,
  disableBreadcrumb = false,
  children,
  ...others
}) => {
  return (
    <div className={styles.pageContainer}>
      <Drawer
        {...others}
        getContainer={false}
        visible={visible}
        push={false}
        onClose={() => onVisibleChange(false)}
        mask={false}
        width="calc(100vw - 256px)"
        style={{ right: '24px', top: `${!disableBreadcrumb ? 72 + 50 : 72}px` }}
        contentWrapperStyle={{
          height: `calc(100vh - 96px ${!disableBreadcrumb ? '- 50px' : ''})`
        }}
        // closeIcon={<Button onClick={() => onVisibleChange(false)}>返回</Button>}>
      >
        {visible ? children : null}
      </Drawer>
    </div>
  )
}

export default AnimateContent