<template>
    <AppLayout title="Payment successful!">
        <div class="p-6 mx-auto mt-32 bg-white rounded-lg">
            <svg
                viewBox="0 0 24 24"
                class="w-16 h-16 mx-auto my-6 text-green-300"
            >
                <path
                    fill="currentColor"
                    d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
                ></path>
            </svg>
            <div class="text-center">
                <h3
                    class="text-base font-semibold text-center text-gray-300 md:text-2xl"
                >
                    Payment Done!
                </h3>
                <p class="my-2 text-sm text-gray-200">
                    Thank you for completing your secure online payment.
                </p>
                <!-- <p v-if="session_id" class="my-2 text-xs text-blue-300/50">
                    Reference: {{ session_id }}
                </p> -->
                <div class="py-3 text-center">
                    <Button size="md" :href="route(redirect_to)">
                        GO BACK
                    </Button>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import Button from "@/Jetstream/Button.vue";
export default {
    props: {
        session_id: String,
        redirect_to: String,
    },
    components: {
        AppLayout,
        Button,
    },
};
</script>
