<template>
<div class="container pt-5">
    <div class="row">
        <div class="col">

            <div class="auth-box">
                <div class="d-flex flex-col items-center gap-4">
                    <Link :href="route('home')" class="flex flex-col items-center gap-2 font-medium">
                    <span class="visually-hidden">{{ title }}</span>
                    </Link>

                    <div class="space-y-2 text-center">
                        <h1 class="text-xl font-medium">{{ title }}</h1>
                        <p class="text-center text-sm text-muted-foreground">{{ description }}</p>
                    </div>
                </div>

                <slot />
            </div>
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import { Link } from '@inertiajs/vue3';

defineProps<{
    title?: string;
    description?: string;
}>();
</script>

<style lang="scss" scoped>
.auth-box {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
</style>
