<script setup lang="ts">
import AppLogo from "@/Components/Layout/AppLogo.vue";
import Card from "@/Components/ui/card/Card.vue";
import CardContent from "@/Components/ui/card/CardContent.vue";
import CardHeader from "@/Components/ui/card/CardHeader.vue";
import { Link } from "@inertiajs/vue3";

defineOptions({
    inheritAttrs: false,
});
</script>

<template>
    <section class="bg-background p-3 border-2 flex justify-center items-center">
        <Card
            class="w-[95dvw] md:w-[80dvw] md:max-w-[60em] h-[90dvh] max-h-[200em] flex flex-col justify-stretch"
        >
            <CardHeader>
                <nav class="flex justify-between items-center p-3">
                    <Link href="/">
                        <AppLogo />
                    </Link>
                </nav>
            </CardHeader>

            <CardContent v-bind="$attrs" class="flex-1 min-h-0 overflow-auto">
                <slot />
            </CardContent>
        </Card>
    </section>
</template>

<style lang="scss" scoped>
section {
    width: 100dvw;
    height: 100dvh;
}
</style>
