---
// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
// All variables are available to use in the HTML template below.

// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/

import { DoesItAPI } from '~/helpers/api/client.js'

import Layout from '../layouts/default.astro'

const kindIndex = await DoesItAPI.kind.index.get()

const kinds = Object.values( kindIndex )
---
<Layout
	headOptions={ {
        title: 'Categories of App Support lists for Apple Silicon',
        description: 'List of compatibility apps and games for Apple Silicon and the Apple M1 Pro and M1 Max Processors including performance reports and benchmarks',
        // meta,
        // link,
        // structuredData: this.structuredData,

        // domain,
        pathname: '/categories',
    } }
>

    <main class="container py-24">
        <div class="flex flex-col">
            <h1 class="title text-2xl leading-tight mb-6">
                Categories
            </h1>

            <div class="line-separator border-white border-t-2 mb-12" />

            <!-- categoryList: {{ categoryList }} -->

            <ul class="categories-list space-y-3">
                { kinds.map( category => (
                    <li
                        class="relative"
                    >
                        <a
                            href={ `/kind/${ category.kindName }` }
                            class="flex justify-start items-center inset-x-0 text-3xl md:text-4xl hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg space-x-3 -mx-5 px-5 md:pr-64 py-3"
                            style="transition-property: border;"
                        >
                            <div class="font-hairline">
                                <h2>{ category.label }</h2>
                                <div class="text-xs opacity-75 mb-3">{ category.description }</div>
                            </div>
                            <div>➔</div>
                        </a>

                    </li>
                )) }
            </ul>

        </div>
    </main>

	<!--

	You can also use imported framework components directly in your markup!

	Note: by default, these components are NOT interactive on the client.
	The `:visible` directive tells Astro to make it interactive.

	See https://docs.astro.build/core-concepts/component-hydration/

	-->

</Layout>