<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    pokemonData: Object,
});
</script>

<template>
    <div class="space-y-4">
        <h3 class="text-[10px] uppercase font-bold text-zinc-500 tracking-widest border-b border-zinc-800 pb-1">Biometrics</h3>
        
        <div class="grid grid-cols-2 gap-2">
            <div class="bg-zinc-900 border border-zinc-800 p-2 rounded flex flex-col items-center">
                <span class="text-[9px] uppercase text-zinc-500 font-bold">Height</span>
                <span class="text-lg font-mono text-zinc-200">{{ pokemonData.height / 10 }}m</span>
            </div>
            <div class="bg-zinc-900 border border-zinc-800 p-2 rounded flex flex-col items-center">
                <span class="text-[9px] uppercase text-zinc-500 font-bold">Weight</span>
                <span class="text-lg font-mono text-zinc-200">{{ pokemonData.weight / 10 }}kg</span>
            </div>
        </div>

    </div>
</template>

