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

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

<template>
    <div class="lg-translate-x-24 relative">
        <div class="text-7xl lg:text-[15rem] font-semibold tracking-tighter text-center">
            {{ pokemonData.names[0].name }}
        </div>
        <div class="text-4xl lg:text-9xl font-semibold tracking-tighter text-center">
            ({{ pokemonData.names[1].name }})
        </div>
        <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
            <div class="w-64 h-64 lg:w-auto lg:h-auto">
                <img :src="pokemonImage" :alt="pokemonData.names[1].name">
            </div>
        </div>
    </div>
</template>

