<template>
  <div class="w-full h-full flex items-center justify-center relative">
    <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full image-pixelated">
      
      <!-- Weapon (Sword) -->
      <g v-if="category === 'weapon'">
        <path d="M2 8 L8 2 M3 8 L8 3" :stroke="color" stroke-width="1" />
        <path d="M2 8 L3 9 L4 8 L3 7 Z" :fill="color" /> <!-- Hilt -->
        <path d="M7 3 L8 2 L9 3" :fill="color" /> <!-- Tip -->
        <rect x="3" y="6" width="1" height="1" :fill="secondaryColor" />
        <rect x="6" y="3" width="1" height="1" :fill="secondaryColor" />
      </g>

      <!-- Armor -->
      <g v-else-if="category === 'armor'">
        <path d="M2 2 H8 V5 L5 8 L2 5 V2 Z" :fill="color" fill-opacity="0.2" />
        <path d="M2 2 H8 V5 L5 8 L2 5 V2 Z" :stroke="color" stroke-width="1" fill="none" />
        <path d="M4 3 H6 V5 H4 V3 Z" :fill="secondaryColor" />
      </g>

      <!-- Hat/Crown -->
      <g v-else-if="category === 'hat' || category === 'crown'">
        <path d="M2 4 H8 V7 H2 V4 Z" :fill="color" fill-opacity="0.2" />
        <path d="M2 4 L2 3 L3 3 L3 2 L4 2 L4 3 L6 3 L6 2 L7 2 L7 3 L8 3 L8 4 V7 H2 Z" :stroke="color" stroke-width="1" fill="none" />
        <rect x="4" y="5" width="2" height="1" :fill="secondaryColor" />
      </g>

      <!-- Accessory/Ring/Amulet -->
      <g v-else-if="category === 'accessory' || category === 'talisman'">
        <circle cx="5" cy="4" r="2" :stroke="color" stroke-width="1" fill="none" />
        <path d="M5 6 V8" :stroke="color" stroke-width="1" />
        <rect x="4" y="8" width="2" height="2" :fill="secondaryColor" />
      </g>

      <!-- Potion -->
      <g v-else-if="category === 'potion'">
        <path d="M4 2 H6 V3 H7 V4 H8 V8 H2 V4 H3 V3 H4 V2 Z" :fill="color" fill-opacity="0.2" />
        <path d="M4 2 H6 V3 H7 V4 H8 V8 H2 V4 H3 V3 H4 V2 Z" :stroke="color" stroke-width="1" fill="none" />
        <rect x="4" y="5" width="2" height="2" :fill="secondaryColor" />
        <rect x="3" y="4" width="1" height="1" fill="white" fill-opacity="0.5" />
      </g>

      <!-- Food -->
      <g v-else-if="category === 'food'">
        <circle cx="5" cy="5" r="3" :fill="color" />
        <rect x="4" y="4" width="1" height="1" :fill="secondaryColor" />
        <rect x="6" y="5" width="1" height="1" :fill="secondaryColor" />
        <rect x="5" y="6" width="1" height="1" :fill="secondaryColor" />
      </g>

      <!-- Book/Manual -->
      <g v-else-if="category === 'book'">
        <rect x="2" y="2" width="6" height="6" :fill="color" />
        <rect x="3" y="3" width="4" height="4" fill="white" fill-opacity="0.3" />
        <path d="M4 4 H7 M4 5 H7 M4 6 H6" stroke="#1b1026" stroke-width="0.5" />
      </g>

      <!-- Crystal/Gem/Special -->
      <g v-else-if="category === 'crystal' || category === 'special'">
        <path d="M5 1 L8 4 L5 9 L2 4 Z" :fill="color" />
        <path d="M5 1 L8 4 L5 9 L2 4 Z" :stroke="secondaryColor" stroke-width="0.5" fill="none" />
        <path d="M5 1 V9 M2 4 H8" :stroke="secondaryColor" stroke-width="0.5" stroke-opacity="0.5" />
      </g>

      <!-- Default (Box) -->
      <g v-else>
        <rect x="2" y="2" width="6" height="6" :stroke="color" stroke-width="1" fill="none" />
        <path d="M2 2 L8 8 M8 2 L2 8" :stroke="color" stroke-width="0.5" />
      </g>
      
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  category?: string;
  type?: string;
  color?: string;
}

const props = withDefaults(defineProps<Props>(), {
  category: 'special',
  type: 'special',
  color: '#e0d8f0'
});

const secondaryColor = computed(() => {
  // Simple logic to generate a contrasting or complementary color
  // For now, just return white or a fixed highlight
  return '#ffffff';
});
</script>

<style scoped>
.image-pixelated {
  image-rendering: pixelated;
}
</style>
