<script setup>
import { store } from '../store.js'
const costColors = ['#8a8f9d', '#4caf6e', '#4a90d9', '#b153d8', '#e5a531']
</script>

<template>
  <div class="shopbar">
    <div class="controls">
      <button
        :disabled="store.state.player.xp_needed === null || store.state.player.gold < store.state.xp_cost"
        @click="store.buyXp()"
      >
        XP kaufen ({{ store.state.xp_cost }}g)
      </button>
      <button :disabled="store.state.player.gold < store.state.reroll_cost" @click="store.reroll()">
        Reroll ({{ store.state.reroll_cost }}g)
      </button>
    </div>
    <div class="slots">
      <div
        v-for="(s, i) in store.state.shop"
        :key="i"
        class="slot"
        :class="{ empty: !s, unaffordable: s && s.cost > store.state.player.gold }"
        :style="s ? { borderColor: costColors[s.cost - 1] } : {}"
        @click="s && store.buy(i)"
      >
        <template v-if="s">
          <img :src="s.icon" :alt="s.name" />
          <div class="sname">{{ s.name }}</div>
          <div class="straits">{{ s.traits.join(' · ') }}</div>
          <div class="scost">{{ s.cost }}g</div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.shopbar { display: flex; gap: 8px; }
.controls { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.slots { display: flex; gap: 6px; flex: 1; }
.slot {
  flex: 1;
  border: 2px solid #2a3145;
  border-radius: 8px;
  background: #1a2030;
  padding: 4px;
  cursor: pointer;
  text-align: center;
  min-height: 96px;
}
.slot:hover:not(.empty) { filter: brightness(1.2); }
.slot.empty { cursor: default; background: #12141d; }
.slot.unaffordable { opacity: 0.5; }
.slot img { width: 100%; height: 52px; object-fit: cover; border-radius: 5px; }
.sname { font-size: 12px; font-weight: 600; }
.straits { font-size: 10px; color: #7d86a0; }
.scost { font-size: 11px; color: #ffd75e; }
</style>
