<script setup lang="ts">
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'

interface ItemData {
  data: number
  count: number
}

const props = defineProps<{
  label: string
  items: Array<ItemData>
  itemMap: Map<number, Item>
  totalCount: number
  maxItems?: number
}>()

const maxItems = computed(() => props.maxItems ?? props.items.length)
</script>

<template>
  <div class="item-row">
    <span class="item-row-label">{{ label }}</span>
    <div class="item-row-content">
      <div v-for="item in items.slice(0, maxItems)" :key="item.data" class="item-cell">
        <NuxtImg
          v-if="itemMap.get(item.data)"
          class="item-img"
          :src="CDRAGON_BASE + mapPath(itemMap.get(item.data)!.iconPath)"
        />
        <div v-else class="item-placeholder" />
        <span class="item-pickrate">{{ ((item.count / totalCount) * 100).toFixed(0) }}%</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.item-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-row-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-on-surface);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.item-row-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.item-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item-img {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 1px solid var(--color-on-surface);
}

.item-placeholder {
  width: 48px;
  height: 48px;
  background: var(--color-surface);
  border-radius: 4px;
  border: 1px solid var(--color-on-surface);
}

.item-pickrate {
  font-size: 0.65rem;
  color: var(--color-on-surface);
  opacity: 0.6;
  margin-top: 1px;
}

/* Responsive: Mobile */
@media only screen and (max-width: 900px) {
  .item-img {
    width: 40px;
    height: 40px;
  }

  .item-placeholder {
    width: 40px;
    height: 40px;
  }
}
</style>
