import useVisualViewportSize from '@/features/core/hooks/use-visual-viewport-size';
import { AppShell, Flex, Paper, em, Title, Stack } from '@mantine/core';
import { useMediaQuery, useViewportSize } from '@mantine/hooks';
import { TrophyIcon } from '@phosphor-icons/react';
import { PropsWithChildren } from 'react';

const Layout: React.FC<PropsWithChildren> = ({ children }) => {
  const isMobile = useMediaQuery(`(max-width: ${em(450)})`);
  const visualViewport = useVisualViewportSize();
  const viewport = useViewportSize();
  
  return (
    <AppShell>
      <AppShell.Main h='100%' style={{ overflow: 'scroll' }}>
        <Flex
          w={isMobile ? '100vw' : em(450)}
          justify='center'
          align='center'
          h='auto'
          direction='column'
          gap='md'
          mx='auto'
          pt={viewport.height === visualViewport.height ? '5rem' : '12.5rem'}
          style={{ transition: 'padding-top 0.1s ease' }}
        >
          <Paper
            shadow='none'
            p='md'
            w='100%'
            maw='375px'
            radius='md'
          >
            <Stack align='center' gap='xs' mb='md'>
              <TrophyIcon size={75} />
              <Title order={4} ta='center'>Welcome to FLXN</Title>
            </Stack>
            {children}
          </Paper>
        </Flex>
      </AppShell.Main>
    </AppShell>
  );
};

export default Layout;