<script setup lang="ts">
// types

type NavLink = {
    title: string;
    path: string;
};

// state

const nav_links = ref<NavLink[]>([
    {
        title: "Shop",
        path: "#",
    },
    {
        title: "Collections",
        path: "#",
    },
    {
        title: "Explore",
        path: "#",
    },
    {
        title: "Contact",
        path: "#",
    },
    {
        title: "Theme features",
        path: "#",
    },
]);
</script>

<template>
    <header class="w-full bg-white flex-center">
        <div
            class="size-full flex items-center justify-between container py-[2.25rem]"
        >
            <div class="w-2/12 flex items-center justify-start">
                <span class="size-[2rem] bg-black rounded-full"></span>
            </div>

            <nav
                class="flex-center gap-[2.5rem] w-8/12 typo-label-sm text-slate-500"
            >
                <NuxtLink
                    v-for="(link, index) in nav_links"
                    :key="index"
                    :to="link.path"
                >
                    {{ link.title }}
                </NuxtLink>
            </nav>

            <div class="w-2/12 flex items-center justify-end gap-[1.5rem]">
                <button class="size-[1.5rem] flex-center">
                    <Icon name="ci:search" class="**:stroke-black" />
                </button>
                <button class="size-[1.5rem] flex-center">
                    <Icon name="ci:profile" class="**:stroke-black" />
                </button>
                <button class="size-[1.5rem] flex-center">
                    <Icon name="ci:cart" class="**:stroke-black" />
                </button>
            </div>
        </div>
    </header>
</template>

<style lang="scss" scoped></style>
