<script setup>
defineProps({ label: String, value: String, active: Boolean, bg: String })
</script>
<template>
  <div class="relative h-[100px] rounded-card shadow-card overflow-hidden cursor-pointer transition active:scale-[0.98]">
    <img :src="bg" alt="" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
    <div class="absolute inset-0"
      :class="active
        ? 'bg-gradient-to-tr from-brand/85 via-brand/70 to-brand/40'
        : 'bg-gradient-to-tr from-black/55 via-black/35 to-black/10'"></div>
    <div class="relative h-full px-4 flex items-end pb-3 text-white">
      <div class="text-lg font-semibold tracking-wide drop-shadow-sm">{{ label }}</div>
      <div v-if="active" class="ml-auto self-start mt-3 w-2 h-2 rounded-full bg-white"></div>
    </div>
  </div>
</template>
