import React from 'react';
import { useMemo } from 'react';
import { ReactNode } from 'react';
import styles from './index.less';
import classNames from 'classnames';
export enum PlacementInfo {
  'left' = 'left',
  'right' = 'right',
  'top' = 'top',
  'bottom' = 'bottom',
}
interface DrawerInfer {
  background?: string;
  placement?: PlacementInfo;
  children?: ReactNode;
  visible: boolean;
  onClose?: Function;
  className?: Object;
}
export const Index: React.FC<DrawerInfer> = (props) => {
  const classStyle = useMemo(
    () =>
      classNames([
        styles['drawer'],
        props.visible && styles.drawerShow,
        styles[`drawer-${props.placement}`],
        props.className && props.className,
      ]),
    [props.visible],
  );
  return <div className={classStyle}>{props.children && props.children}</div>;
};

export default Index;