import React from 'react';
import { Route } from 'react-router';
import { SwitchTransition } from 'react-transition-group';
import Fade from '@/components/elements/Fade';
import styled from 'styled-components/macro';
import tw from 'twin.macro';

const StyledSwitchTransition = styled(SwitchTransition)`
    ${tw`relative`};
    
    & section {
        ${tw`absolute w-full top-0 left-0`};
    }
`;

const TransitionRouter: React.FC = ({ children }) => (
    <Route
        render={({ location }) => (
            <StyledSwitchTransition>
                <Fade timeout={150} key={location.key} in appear unmountOnExit>
                    <section>
                        {children}
                    </section>
                </Fade>
            </StyledSwitchTransition>
        )}
    />
);

export default TransitionRouter;