<template>
  <nav class="navbar">
    <div class="navbar-menu">
      <div class="navbar-start">
        <NuxtLink :key="index" v-for="(item, index) in listPage" :to="item.path" class="navbar-item"
          >{{ item.title }}
        </NuxtLink>
      </div>
      <div class="navbar-end" v-if="!isUser">
        <NuxtLink to="#" class="navbar-item"> Đăng nhập </NuxtLink>
        <NuxtLink to="#" class="navbar-item"> Đăng ký </NuxtLink>
      </div>
      <HeaderUser v-else />
    </div>
  </nav>
</template>

<script setup>
import HeaderUser from './HeaderUser.vue';

const isUser = ref(false);

const listPage = [
  // {
  //   path: '/',
  //   title: 'Trang chủ',
  // },
  // {
  //   path: '/about',
  //   title: 'Giới thiệu',
  // },
  {
    path: '#service-pricing',
    title: 'Bảng giá',
  },
  {
    path: '#contact',
    title: 'Liên hệ',
  },
];
</script>

<style lang="scss">
.navbar {
  flex: auto;
  min-height: fit-content;

  .navbar-menu {
    justify-content: flex-end;
    gap: 30px;
  }
  .navbar-start {
    margin-inline-end: unset;
    flex: auto;
    justify-content: flex-end;
    gap: 10px;
  }

  .navbar-end {
    margin-inline-start: unset;
    gap: 10px;
  }

  .navbar-item {
    border-radius: 24px;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
  }
  .router-link-active {
    background-color: var(--color-primary);
    color: #fff;
  }
  a.navbar-item:focus,
  a.navbar-item:focus-within,
  a.navbar-item:hover,
  .navbar-link:focus,
  .navbar-link:focus-within,
  .navbar-link:hover {
    background-color: var(--color-hover);
    color: #fff;
  }
}
</style>
