<script setup>

import { ref } from 'vue'

import Pokedex from './components/Pokedex.vue'
import About from './components/About.vue'
import Page404 from './components/404.vue'

const pokemonId = ref(null)

const isPokemon = ref(false)
const isAbout = ref(false)
const is404 = ref(false)


function getPage() {
    const url = window.location.href;
    const page = url.split("/").slice(-1)[0];

    if (page > 0 && page < 1006) {
        isPokemon.value = true
        pokemonId.value = parseInt(page)
    } else if (page === 'about') {
        isAbout.value = true;
    } else {
        is404.value = true
    }
}

getPage()

</script>

<template>
    <div v-if="isPokemon">
        <Pokedex :pokemonId="pokemonId" />
    </div>
    <div v-if="isAbout">
        <About />
    </div>
    <div v-if="is404">
        <Page404 />
    </div>
</template>
