<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import AppLogoIcon from '@/components/AppLogoIcon.vue';
import { home } from '@/routes';

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

<template>
    <div class="auth-layout">
        <div class="auth-layout__container">
            <div class="auth-layout__inner">
                <div class="auth-layout__header">
                    <Link :href="home()" class="auth-layout__logo-link">
                        <div class="auth-layout__logo-box">
                            <AppLogoIcon class="auth-layout__logo" />
                        </div>
                        <span class="sr-only">{{ title }}</span>
                    </Link>
                    <div class="auth-layout__title-box">
                        <h1 class="auth-layout__title">{{ title }}</h1>
                        <p class="auth-layout__description">
                            {{ description }}
                        </p>
                    </div>
                </div>
                <slot />
            </div>
        </div>
    </div>
</template>
