<script setup lang="ts">
import { computed } from 'vue';

import { SvgArrowRightIcon } from '@vben/icons';

import useAvatar from '@/assets/image/user.png';
import { $t } from '@/locales';

import Logo from '#/assets/image/logo.png';
import { useLoginModalStore } from '#/store';

import SelectLang from '../select-lang.vue';
import Avatar from './avatar.vue';

const loginModalStore = useLoginModalStore();

const menus = computed(() => [
  { title: $t('homeMenu.toolDownloads'), path: '/' },
  { title: $t('homeMenu.aIGeneratedApps'), path: '/' },
  { title: $t('homeMenu.aIAssistants'), path: '/' },
  { title: $t('homeMenu.shaluAcademy'), path: '/' },
  { title: $t('homeMenu.applicationMarket'), path: '/' },
]);

function openLogin() {
  loginModalStore.open();
}
</script>

<template>
  <div class="mb-[32px] flex items-center justify-between">
    <img :src="Logo" alt="logo" class="logo" height="30px" width="138px" />
    <ul class="menu flex gap-[60px] text-xs">
      <li
        v-for="menuItem in menus"
        :key="menuItem.title"
        class="flex items-center gap-2"
      >
        <span>{{ menuItem.title }}</span>
        <SvgArrowRightIcon class="arrow size-2" />
      </li>
    </ul>
    <div class="flex gap-2">
      <SelectLang />
      <Avatar :avatar="useAvatar" class="cursor-pointer" @click="openLogin" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.logo {
  cursor: pointer;
}

.menu li {
  color: #462424;
  cursor: pointer;

  &:hover {
    color: #7a003d;

    :deep(path) {
      fill: #7a003d;
    }
  }
}
</style>
