import React, { ReactChild, useState } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import theme from 'styles/theme';
import { BrowserRouter } from 'react-router-dom';

export const ThemeContext = React.createContext(null as any);

const Padding = styled.div`
    .preview-padding > div {
        padding: 24px 24px 0;
        & > * {
            margin-right: 24px;
            margin-bottom: 24px;
        }
    }
`;
export default ({ children }: { children: ReactChild }) => {
    const [state, setState] = useState(theme);
    return (
        <ThemeContext.Provider value={[state, setState]}>
            <ThemeProvider theme={state}>
                <BrowserRouter>
                    <Padding>{children}</Padding>
                </BrowserRouter>
            </ThemeProvider>
        </ThemeContext.Provider>
    );
};