<template>
    <div class="container">
        <div class="card">
            <!-- Navigation Link at the top -->
            <div class="navigation-link">
                <button
                    class="link-button"
                    @click="goBack()"
                >
                    <v-icon :icon="mdiArrowLeft" />
                    {{ t('returnToCreator') }}
                </button>
            </div>

            <h1>{{ t('title') }}</h1>
            <p>{{ t('message') }}</p>
        </div>
    </div>
</template>

<script setup>
    import { useRoute, useRouter } from 'vue-router';
    import { useI18n } from 'vue-i18n';
    import { mdiArrowLeft } from '@mdi/js';

    const router = useRouter();
    const route = useRoute();
    const { t } = useI18n();

    function goBack() {
        const creatorName = route.params.creator?.split('/')[0] || '';
        router.push(`/@${creatorName}`);
    }
</script>

<i18n>
{
    "en": {
        "title": "Payment Failed",
        "message": "We couldn't process your payment.",
        "retry": "Try Again",
        "returnToCreator": "Return to creator page"
    },
    "fr": {
        "title": "Échec du paiement",
        "message": "Nous n'avons pas pu traiter votre paiement.",
        "retry": "Réessayer",
        "returnToCreator": "Retourner à la page du créateur"
    }
}
</i18n>

<style scoped>
    .container {
        @apply flex items-center justify-center;
        @apply p-5;
        @apply w-full;
        @apply mx-auto;
        @apply max-w-[1024px];
    }

    .card {
        @apply bg-hSurface text-hOnSurface;
        @apply p-8;
        @apply font-sans;
        @apply rounded-2xl;
        @apply shadow-2xl;
        @apply relative;
        @apply w-full;
        @apply max-w-2xl;
        @apply mx-auto;
    }

    .card::before {
        content: '';
        @apply absolute inset-0;
        @apply rounded-2xl;
        @apply p-[1px];
        background: linear-gradient(
            135deg,
            rgba(64, 64, 64, 1) 0%,
            rgba(64, 64, 64, 0) 20%,
            rgba(64, 64, 64, 0.5) 100%
        );
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }

    .navigation-link {
        @apply flex items-center;
        @apply mb-6;
    }

    .link-button {
        @apply flex items-center gap-2;
        @apply text-hutopyPrimary hover:text-hutopySecondary;
        @apply transition-colors;
        @apply duration-300;
        @apply text-xl;
        @apply font-semibold;
    }

    h1 {
        @apply text-6xl;
        @apply font-medium;
        @apply mb-8;
        @apply text-center;
    }

    p {
        @apply text-lg;
        @apply font-medium;
        @apply mb-8;
        @apply text-center;
    }
</style>
