import React from 'react';
import ContentContainer from '@/components/elements/ContentContainer';
import { CSSTransition } from 'react-transition-group';
import tw from 'twin.macro';
import FlashMessageRender from '@/components/FlashMessageRender';
import { Helmet } from 'react-helmet';
import useServer from '@/plugins/useServer';

interface Props {
    title?: string;
    className?: string;
    showFlashKey?: string;
}

const PageContentBlock: React.FC<Props> = ({ title, showFlashKey, className, children }) => {
    const { name } = useServer();

    return (
        <CSSTransition timeout={150} classNames={'fade'} appear in>
            <>
                {!!title &&
                <Helmet>
                    <title>{name} | {title}</title>
                </Helmet>
                }
                <ContentContainer css={tw`my-10`} className={className}>
                    {showFlashKey &&
                    <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
                    }
                    {children}
                </ContentContainer>
                <ContentContainer css={tw`mb-4`}>
                    <p css={tw`text-center text-neutral-500 text-xs`}>
                        &copy; 2015 - 2020&nbsp;
                        <a
                            rel={'noopener nofollow noreferrer'}
                            href={'https://pterodactyl.io'}
                            target={'_blank'}
                            css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
                        >
                            Pterodactyl Software
                        </a>
                    </p>
                </ContentContainer>
            </>
        </CSSTransition>
    );
};

export default PageContentBlock;