<template>
  <div class="grow flex flex-col w-full h-full relative overflow-auto">
    <div class="m-4 relative">
      <h4 class="font-medium text-lg max-w-[375px]">Equipment</h4>
      <div class="flex justify-center items-center flex-wrap gap-20">
        <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
          <div class="h-full flex flex-col justify-center items-center">
            <h3>{{ gameStore.character?.name }}</h3>
            <img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
            <span class="block text-sm">Level {{ gameStore.character?.level }}</span>
          </div>
        </div>
        <div class="flex flex-col gap-3 mx-5 mt-2">
          <div class="flex gap-3 justify-center">
            <!-- Helmet -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/helmet.svg" class="center-element w-11/12 opacity-20" />
            </div>

            <!-- Head charm -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/head_charm.svg" class="center-element w-11/12 opacity-20" />
            </div>
          </div>

          <div class="flex gap-3 justify-center">
            <!-- Bracers -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/bracers.svg" class="center-element w-11/12 opacity-20" />
            </div>

            <!-- Chestplate -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/chestplate.svg" class="center-element w-10/12 opacity-20" />
            </div>

            <!-- Primary Weapon -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/primary_weapon.svg" class="center-element w-11/12 opacity-20" />
            </div>
          </div>

          <div class="flex gap-3 justify-center">
            <!-- Legs -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/legs.svg" class="center-element w-11/12 opacity-20" />
            </div>

            <div class="flex flex-col gap-3">
              <!-- Belt/pouch -->
              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
                <img src="/assets/icons/inventory/pouch.svg" class="center-element w-11/12 opacity-20" />
              </div>

              <!-- Boots -->
              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
                <img src="/assets/icons/inventory/boots.svg" class="center-element w-11/12 opacity-20" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
    </div>
    <div class="m-4">
      <h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
      <div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
        <ul class="p-0 m-0 list-none">
          <li class="leading-6">Health:</li>
          <li class="leading-6">Defense:</li>
          <li class="leading-6">More stats:</li>
          <li class="leading-6">Extra stats:</li>
        </ul>
        <ul class="p-0 m-0 list-none text-right">
          <li class="leading-6">+15</li>
          <li class="leading-6">500</li>
          <li class="leading-6"></li>
          <li class="leading-6"></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from '@/stores/gameStore'

const gameStore = useGameStore()
</script>
