<script setup lang="ts">
defineProps<{
    eyebrow?: string;
    title: string;
    subtitle: string;
}>();
</script>

<template>
    <div class="auth-wrap">
        <div class="auth-card">
            <div v-if="eyebrow" class="auth-eyebrow">{{ eyebrow }}</div>
            <h1 class="auth-title">{{ title }}</h1>
            <p class="auth-sub">{{ subtitle }}</p>

            <slot name="alert" />

            <slot />

            <div class="auth-rule" />

            <p class="auth-footer">
                <slot name="footer" />
            </p>
        </div>
    </div>
</template>

<style scoped lang="sass">
.auth-wrap
    display: flex
    justify-content: center
    padding: 2.5rem 1rem

.auth-card
    width: 100%
    max-width: 400px
    background: #fff
    border: 1px solid #E8E8E8
    padding: 2.5rem 2.25rem

.auth-eyebrow
    font-family: 'Inter', sans-serif
    font-size: 11px
    font-weight: 500
    letter-spacing: 0.08em
    text-transform: uppercase
    color: #C0392B
    margin-bottom: 0.5rem

.auth-title
    font-family: 'Playfair Display', serif
    font-weight: 700
    font-size: 30px
    color: #111
    margin: 0 0 0.4rem

.auth-sub
    font-family: 'Inter', sans-serif
    font-size: 13px
    color: #666
    margin: 0 0 1.75rem
    line-height: 1.5
</style>
