<template>
    <main>
        <article class="article">
            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
                <h1 id="hero" class="font-hero">Fonts</h1>
                <p id="hero-desc" class="font-hero-desc">This page were created to list all fonts I have hosted it here, so you can use it too.</p>
            </section>
            <section v-if="pending" class="web-section">
                <h2 id="noto" class="web-title">Pending...</h2>
                <p id="noto-desc">Loading font lists, please wait...</p>
            </section>
            <section v-else-if="error" class="web-section">
                <h2 id="noto" class="web-title">Error</h2>
                <p id="noto-desc">{{ error.message }}</p>
            </section>
            <section v-else-if="fonts" v-for="family in fonts" key="family.id" class="web-section" :aria-labelledby="family.id + '-title'" :aria-describedby="family.desc + '-desc'">
                <h2 :id="family.id + '-title'" class="web-title">{{ family.family }}</h2>
                <p :id="family.id + '-desc'">{{ family.desc }}</p>
                <ul class="font-cards">
                    <li v-for="font in family.children" :key="font.id">
                        <a :class="'font-card', {disabled: font.disabled}" :href="fontUrl + font.css">
                            <div class="font-card-content text-2xl">
                                {{ font.name }}
                                <!-- <p>{{ fontUrl + font.css }}</p> -->
                            </div>
                        </a>
                    </li>
                </ul>
            </section>
            <section v-else class="web-section">
                <h2 id="noto" class="web-title">An unknown error occured</h2>
                <p id="noto-desc">Oh no! An unknown error occured, please tell site administrator to fix this ASAP.</p>
            </section>
        </article>
    </main>
</template>

<script setup>
import { useFontLists } from '@/composables/useFontLists';

const config = useRuntimeConfig();
const TITLE = "Fonts"
const DESC = "Fonts hosted on thawia.ng"
const fontUrl = config.public?.fontUrl || 'https://fonts.thawiang.com/';
const fontListFile = 'api/typefaces.json';
const { fonts, error, pending } = useFontLists(fontUrl, fontListFile);

useHead({
  title: TITLE,
  meta: [
    { name: 'description', content: DESC },
    { property: 'og:title', content: TITLE },
    { property: 'og:description', content: DESC },
    { property: 'og:type', content: 'website' }
  ]
})
</script>