import React from 'react';

import Portal from '../Portal';

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

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

const Drawer: React.FunctionComponent<Props> = ({
  anchor = 'bottom',
  children,
  open,
}) => {
  return (
    <Portal>
      <Slide
        open={open}
        anchor={anchor}
      >
        <Container>
          {children}
        </Container>
      </Slide>
    </Portal>
  );
};

export default Drawer;
