<template>
  <div class="w-12 h-12 relative image-pixelated">
    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" shapeRendering="crispEdges">
      <!-- Body/Head -->
      <rect x="6" y="2" width="4" height="4" :fill="finalSkin" /> <!-- Head -->
      <rect x="5" y="6" width="6" height="5" :fill="finalOutfit" /> <!-- Body -->
      <rect x="5" y="6" width="2" height="3" :fill="finalOutfit" filter="brightness(0.9)" /> <!-- Left Arm -->
      <rect x="9" y="6" width="2" height="3" :fill="finalOutfit" filter="brightness(0.9)" /> <!-- Right Arm -->
      <rect x="6" y="11" width="1" height="3" :fill="finalSkin" /> <!-- Leg L -->
      <rect x="9" y="11" width="1" height="3" :fill="finalSkin" /> <!-- Leg R -->

      <!-- Hair -->
      <rect x="5" y="1" width="6" height="2" :fill="finalHair" />
      <rect x="4" y="2" width="1" height="3" :fill="finalHair" />
      <rect x="11" y="2" width="1" height="3" :fill="finalHair" />

      <!-- Face -->
      <rect x="7" y="4" width="1" height="1" fill="#000" opacity="0.6"/> <!-- Eye -->
      <rect x="9" y="4" width="1" height="1" fill="#000" opacity="0.6"/> <!-- Eye -->

      <!-- Accessory/Deity Specifics -->
      <rect v-if="deityId === 'Mazu'" x="5" y="0" width="6" height="1" fill="#d4af37" /> <!-- Crown -->
      <rect v-if="deityId === 'EarthGod'" x="5" y="10" width="6" height="1" fill="#8e5c2e" /> <!-- Belt -->
      <rect v-if="deityId === 'Matchmaker'" x="10" y="7" width="2" height="2" fill="#ff0000" /> <!-- Red Thread -->

      <!-- Weapon -->
      <path v-if="weapon === 'sword'" d="M11 9 L13 7 L14 8 L12 10 Z" fill="#ccc" />
      <rect v-if="weapon === 'staff'" x="11" y="5" width="1" height="8" fill="#8d6e63" />
    </svg>
  </div>
</template>

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

interface Props {
  skinColor?: string;
  hairColor?: string;
  outfitColor?: string;
  weapon?: 'none' | 'sword' | 'staff';
  deityId?: string;
}

const props = withDefaults(defineProps<Props>(), {
  skinColor: '#ffdbac',
  hairColor: '#5e412f',
  outfitColor: '#78909c',
  weapon: 'none'
});

const finalSkin = computed(() => {
  if (props.deityId === 'Mazu') return '#ffe0bd';
  if (props.deityId === 'EarthGod') return '#f0c0a8';
  if (props.deityId === 'Matchmaker') return '#ffe0bd';
  if (props.deityId === 'Wenchang') return '#ffe0bd';
  return props.skinColor;
});

const finalHair = computed(() => {
  if (props.deityId === 'Mazu') return '#1a1a1a';
  if (props.deityId === 'EarthGod') return '#f0f0f0';
  if (props.deityId === 'Matchmaker') return '#f0f0f0';
  if (props.deityId === 'Wenchang') return '#1a1a1a';
  return props.hairColor;
});

const finalOutfit = computed(() => {
  if (props.deityId === 'Mazu') return '#ffa500';
  if (props.deityId === 'EarthGod') return '#d75b5b';
  if (props.deityId === 'Matchmaker') return '#d95763';
  if (props.deityId === 'Wenchang') return '#9fd75b';
  return props.outfitColor;
});
</script>

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