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

import useGetAccount from "~/composables/api/account/useGetAccount";
import { useAuth } from "~/composables/api/auth/useAuth";

// types

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

// state

const { data: account } = useGetAccount();
const { logout } = useAuth();

const nav_links = ref<NavLink[]>([
    {
        title: "فروشگاه",
        path: "#"
    },
    {
        title: "دسته بندی ها",
        path: "#"
    },
    {
        title: "جستجو",
        path: "#"
    },
    {
        title: "ارتباط با ما",
        path: "#"
    },
    {
        title: "امکانات",
        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
                v-if="!!account"
                class="w-2/12 flex items-center justify-start"
            >
                <span class="size-[2rem] bg-black rounded-full"></span>
                <button @click="() => logout(true)">خروج از وبسایت</button>
            </div>

            <button
                @click="navigateTo('/signin')"
                class="cursor-pointer"
                v-else
            >
                وارد شوید
            </button>

            <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>
