import Logo from "@/src/components/general/logo";
import Center from "@/twui/components/layout/Center";
import Container from "@/twui/components/layout/Container";
import Divider from "@/twui/components/layout/Divider";
import Main from "@/twui/components/layout/Main";
import Row from "@/twui/components/layout/Row";
import Section from "@/twui/components/layout/Section";
import Spacer from "@/twui/components/layout/Spacer";
import Stack from "@/twui/components/layout/Stack";
import { PropsWithChildren } from "react";

type Props = PropsWithChildren & {};

export default function Layout({ children }: Props) {
    return (
        <Main className="w-screen h-screen overflow-hidden">
            <Section className="w-full h-full">
                <Container className="grid-frame grid-cols-1 h-full">
                    <Stack className="w-full justify-between h-full grid-cell">
                        <Stack className="gap-0">
                            <Row>
                                <Row className="p-6">
                                    <Logo />
                                </Row>
                                <Divider vertical />
                            </Row>
                            <Divider />
                        </Stack>
                        <Center className="p-10">{children}</Center>
                        <Stack>
                            <Divider />
                            <Spacer className="h-20 w-full" />
                        </Stack>
                    </Stack>
                </Container>
            </Section>
        </Main>
    );
}
