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,
}: Props) => (
  <Portal>
    <Slide
      open={open}
      anchor={anchor}
    >
      <Container>
        {children}
      </Container>
    </Slide>
  </Portal>
);

export default Drawer;