<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-black border-black'
                : '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" 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-black rounded-md p-0.5 text-center bottom-4 left-4 text-slate-200 text-[10px] lg:text-xs absolute"
            >
                <Icon name="bi:check" size="20" class="**:fill-white" />
            </span>
        </Transition>
    </button>
</template>

<style scoped></style>
