import React from 'react';

import Portal from '../Portal';

import { Slide, Wrapper } from './styled';

type Props = {
  anchor?: 'left' | 'top' | 'right' | 'bottom';
  children: React.ReactNode;
  open?: boolean;
  zIndex?: number;
};

const Drawer: React.FC<Props> = ({
  anchor = 'bottom',
  children,
  open = false,
  zIndex = 3,
}: Props) => (
  <Portal>
    <Slide open={open} anchor={anchor} data-testid="drawer" zIndex={zIndex}>
      <Wrapper>{children}</Wrapper>
    </Slide>
  </Portal>
);

export default Drawer;