<script setup lang="ts">
import type { Item } from '~/types/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">
      <template v-for="item in items.slice(0, maxItems)" :key="item.data">
        <ItemIcon
          v-if="itemMap.get(item.data)"
          :item="itemMap.get(item.data)!"
          :show-pickrate="true"
          :pickrate="item.count / totalCount"
          :size="48"
          class="item-cell"
        />
        <div v-else class="item-placeholder" />
      </template>
    </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-placeholder {
  width: 48px;
  height: 48px;
  background: var(--color-surface);
  border-radius: 4px;
  border: 1px solid var(--color-on-surface);
}
</style>
