<template>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">{{ item.name }}</h5>
            <p class="card-text">{{ item.description }}</p>

            <p v-if="item.voucher && item.user_rewards?.voucher?.is_redeemed" class="text-secondary">{{ item.voucher.code }}</p>
            <p v-else-if="item.voucher" class="text-primary">{{ item.voucher.code }}</p>

            <p v-if="item.voucher && item.voucher.type === 'AMOUNT'">RM{{ item.voucher.value / 100 }} Discount</p>
            <p v-if="item.voucher && item.voucher.type === 'PERCENT' && item.voucher.value > 0">{{ item.voucher.value }}% Discount</p>
            <p v-else>Discount</p>
        </div>
        <div class="card-footer text-muted">
            <p v-if="item.user_rewards && item.user_rewards.voucher.is_redeemed">
                Voucher claimed
            </p>
            <p v-else-if="item.voucher && item.voucher.end_date">
                Valid till {{ item.voucher.end_date }}
            </p>
            <p v-else>
                -
            </p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useComponentHandler } from '@/composables/useComponentHandler';

interface Props {
    data: Record<string, any>;
}

const props = defineProps<Props>();
const { item } = useComponentHandler(props);
</script>
