import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import {DynamicLogo} from "../../components/core/Logo";
import {paths} from "../../path";

export function PublicLayout({ children }) {
    return (
        <Box
            sx={{
                display: { xs: 'flex', lg: 'grid' },
                flexDirection: 'column',
                gridTemplateColumns: '1fr 1fr',
            }}
        >
            <Box sx={{ display: 'flex', flex: '1 1 auto', flexDirection: 'column' }}>
                <Box sx={{ p: 3 }}>
                    <Box component={'a'} href={paths.home} sx={{ display: 'inline-block', fontSize: 0 }}>
                        <DynamicLogo colorDark="light" colorLight="dark" height={32} width={122} />
                    </Box>
                </Box>
                <Box sx={{ alignItems: 'center', display: 'flex', flex: '1 1 auto', justifyContent: 'center', p: 3 }}>
                    <Box sx={{ maxWidth: '450px', width: '100%' }}>{children}</Box>
                </Box>
            </Box>
            <Box
                sx={{
                    alignItems: 'center',
                    background: 'radial-gradient(50% 50% at 50% 50%, #122647 0%, #090E23 100%)',
                    color: 'var(--mui-palette-common-white)',
                    display: { xs: 'none', lg: 'flex' },
                    justifyContent: 'center',
                    p: 3,
                }}
            >
                <Stack spacing={3}>
                    <Stack spacing={1}>
                        <Typography color="inherit" sx={{ fontSize: '24px', lineHeight: '32px', textAlign: 'center' }} variant="h1">
                            <Box component="span" sx={{ color: '#15b79e' }}>
                                Добро пожаловать в бар
                            </Box>
                        </Typography>
                        <Typography align="center" variant="subtitle1">
                            Самый большой выбор честно спизженных коктейлей
                        </Typography>
                        <Box
                            component="img"
                            alt="Under development"
                            src="/assets/qr.png"
                            sx={{ display: 'inline-block', height: 'auto', maxWidth: '100%', width: '400px' }}
                        />
                    </Stack>
                </Stack>
            </Box>
        </Box>
    );
}
