<script setup lang="ts">
import AppIcon from '@/components/ui/AppIcon.vue'

defineProps<{
  icon: string
  title: string
  description: string
  unlocked?: boolean
  unlockedAt?: string
  coins?: number
}>()
</script>

<template>
  <div class="badge-card" :class="{ locked: !unlocked }">
    <AppIcon class="badge-icon" :icon="icon" :size="32" />
    <div class="badge-body">
      <div class="badge-title">{{ title }}</div>
      <div class="badge-desc">{{ description }}</div>
      <div class="badge-meta" v-if="unlocked && unlockedAt">
        <AppIcon class="meta-icon" icon="circle-check" :size="14" />
        Получено {{ new Date(unlockedAt).toLocaleDateString('ru-RU') }}
        <span v-if="coins" class="coins-tag">
          +{{ coins }}
          <AppIcon class="coin-icon" icon="coin" :size="14" />
        </span>
      </div>
      <div class="badge-meta locked-msg" v-else-if="!unlocked">
        <AppIcon class="meta-icon" icon="lock" :size="14" />
        Заблокировано
      </div>
    </div>
  </div>
</template>

<style scoped>
.badge-card {
  background: var(--color-white-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s;
}
.badge-card:not(.locked):hover {
  transform: translateY(-2px);
}
.locked {
  opacity: 0.5;
  filter: grayscale(0.5);
}
.badge-icon {
  flex-shrink: 0;
  color: var(--color-text);
}
.badge-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 3px;
}
.badge-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.badge-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.meta-icon {
  color: var(--color-text-secondary);
}
.locked-msg {
  color: var(--color-gray-400);
}
.coins-tag {
  margin-left: 6px;
  background: var(--color-star-a15);
  border-radius: 10px;
  padding: 1px 8px;
  color: var(--color-warning-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.coin-icon {
  color: var(--color-warning-text);
}
</style>
