// @flow
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import styled, { ThemeProvider } from 'styled-components';

import { Theme } from './index';
import '../helpers/polyfills';

const { ApoliticalBrand } = Theme;

type StyleguidistWrapperProps = {
  children: any,
}

const FrameWrapper = styled.div`
  position: relative;
  transform: translate3d(0, 0, 0);
  width: 100%;
`;

export default ({ children }: StyleguidistWrapperProps) => (
  <>
    <MemoryRouter>
      <ThemeProvider theme={ApoliticalBrand}>
        <FrameWrapper>
          {children}
        </FrameWrapper>
      </ThemeProvider>
    </MemoryRouter>
  </>
);