<template>
    <div style="max-width: 800px; margin-left: auto; margin-right: auto;">
        <p style="font-variant: small-caps; margin-bottom: 1rem; font-size: 1.25rem; line-height: 1.75rem;">Bienvenue sur d[any], <span>{{ username }}</span>.</p>
        <p>Nous vous invitons à valider votre compte afin de profiter de toutes les fonctionnalités de d[any].</p>
        <div style="padding-top: 1rem; padding-bottom: 1rem; text-align: center;">
            <a :href="`https://d-any.com/user/mailvalidation?u=${id}&t=${timestamp}&h=${hash}`" target="_blank"><span style="display: inline-block; border-width: 1px; border-color: #525252; background-color: #e5e5e5; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-weight: 200; color: #171717; text-decoration: none;">Je valide mon compte</span></a>
            <span style="display: block; padding-top: 0.5rem; font-size: 0.75rem; line-height: 1rem;">Ce lien est valable 1 heure.</span>
        </div>
        <div>
            <span>Vous pouvez egalement copier le lien suivant pour valider votre compte: </span>
            <pre style="display: inline-block; border-bottom-width: 1px; font-size: 0.75rem; line-height: 1rem; color: #171717; font-weight: 400; text-decoration: none;">{{ `https://d-any.com/user/mailvalidation?u=${id}&t=${timestamp}&h=${hash}` }}</pre>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import Bun from 'bun';

const { id, username, timestamp } = defineProps<{
    id: number
    username: string
    timestamp: number
}>();
const hash = computed(() => Bun.hash(id.toString(), timestamp));
</script>