<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { usePage } from '@inertiajs/vue3';

const page = usePage();

const links = [
    {
        name: 'Perceptron Simple',
        href: '/perceptron',
        data: { type: 'simple' },
    },
    {
        name: 'Descente du gradient',
        href: '/perceptron',
        data: { type: 'gradientdescent' },
    },
];

const isActiveLink = (link: any) => {
    return page.component === 'PerceptronViewer' && page.props.type === link.data.type;
};
</script>

<template>
    <header
        class="my-6 w-full text-sm not-has-[nav]:hidden"
    >
        <nav class="flex items-center justify-center gap-4">
            <Link
                v-for="link in links"
                :key="link.name"
                :href="link.href"
                :class="{'border border-[#00F] dark:border-[#00F] dark:text-[#898999]' : isActiveLink(link), 'dark:text-[#EDEDEC] border-[#19140035]': !isActiveLink(link), 'inline-block rounded-sm border px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:hover:border-[#62605b]': true}"
                :data="link.data"
                view-transition
            >
                {{ link.name }}
            </Link>
        </nav>
    </header>
</template>
