import React from 'react';

import Icon from '../Icon';
import Drawer from '../Drawer';

import { ThumbnailWrapper, Page, Thumbnail } from './styled';
import { Wrapper, Head, Body, IconWrapper } from '../../global/sidebarStyled'

type Props = {
  isActive: boolean;
};

const Thumbnails : React.FunctionComponent<Props> = ({
  isActive,
}) => {
  return (
    <Drawer anchor="right" open={isActive}>
      <Wrapper>
        <Head>
          <IconWrapper>
            <Icon glyph="right-back" />
          </IconWrapper>
        </Head>
        <Body>
          <ThumbnailWrapper>
            <Page>1</Page>
            <Thumbnail src="/static/thumbnail1.png" />
          </ThumbnailWrapper>
        </Body>
      </Wrapper>
    </Drawer>
  );
};

export default Thumbnails;
