<script setup lang="ts">
// types

type Props = {
    gateway: PaymentGateway;
    isSelected: boolean;
};

type Emits = {
    select: [value: null];
};

// props

defineProps<Props>();

// emits

const emit = defineEmits<Emits>();
</script>

<template>
    <button
        @click="emit('select', null)"
        :class="isSelected ? 'ring-2 ring-offset-2 ring-blue-500 border-blue-500' : 'border-slate-200'"
        class="w-full p-5 border rounded-xl flex flex-col gap-4 transition-all cursor-pointer relative overflow-hidden"
    >
        <div class="aspect-square flex-center">
            <NuxtImg
                :src="gateway.picture"
                loading="lazy"
                fetch-priority="low"
                class="object-cover"
            />
        </div>
        <span class="typo-label-sm text-right text-black">
            {{ gateway.title }}
        </span>
        <Transition
            enter-active-class="animate__animated animate__fadeInLeft animate__faster"
            leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
        >
            <span
                v-if="isSelected"
                class="bg-blue-500 rounded-md p-0.5 text-center bottom-4 left-4 text-slate-200 text-[10px] lg:text-xs absolute"
            >
                <Icon
                    name="ci:bi-check"
                    size="20"
                    class="**:fill-white"
                />
            </span>
        </Transition>
    </button>
</template>

<style scoped></style>
