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

import useGetAccount from "~/composables/api/account/useGetAccount";

// state

const route = useRoute();

const profileLinks = ref([
    {
        icon: "bi:person-vcard",
        title: "پروفایل",
        path: { name: "profile" },
    },
    {
        icon: "bi:map",
        title: "آدرس ها",
        path: { name: "profile-addresses" },
    },
    {
        icon: "bi:cart",
        title: "خرید ها و سفارش ها",
        path: { name: "profile-purchases-and-orders" },
    },
    {
        icon: "bi:ticket",
        title: "تیکت ها",
        path: { name: "profile-tickets" },
    },
]);

// queries

const { data: account, suspense } = useGetAccount();

await suspense();
</script>

<template>
    <div class="w-3/12 flex flex-col gap-4">
        <div class="w-full rounded-xl bg-slate-50 border border-slate-200 p-4">
            <div class="flex items-center justify-between w-full">
                <div class="flex flex-col items-start gap-1">
                    <span class="flex font-semibold text-dynamic-primary">
                        <p>
                            {{ `${account?.first_name} ${account?.last_name}` }}
                        </p>
                    </span>
                    <button class="text-xs font-semibold text-cyan-500">
                        ویرایش اطلاعات
                    </button>
                </div>
                <img
                    src="https://shatelpart.com/storage/users/user-15-155Mn1.png"
                    class="rounded-full size-[3rem] hover:border-dynamic-rose transition"
                />
            </div>
        </div>

        <div
            class="w-full flex flex-col gap-2 rounded-xl bg-slate-50 border border-slate-200 p-4"
        >
            <NuxtLink
                v-for="(link, index) in profileLinks"
                :key="index"
                :to="{ ...link.path }"
                :class="
                    route.name == link.path.name
                        ? 'bg-black text-slate-100 **:fill-slate-100 '
                        : '**:fill-black '
                "
                class="flex items-center justify-between transition-all rounded-lg py-4 px-3"
            >
                <span class="flex-center gap-3">
                    <div class="size-5 flex-center">
                        <Icon :name="link.icon" />
                    </div>
                    <span class="text-sm">{{ link.title }}</span>
                </span>

                <Icon name="bi:chevron-left" class="transition-all" />
            </NuxtLink>
        </div>
    </div>
</template>

<style scoped></style>
