<template>
  <UiDropdown
    v-if="authenticated"
    class="profile-dropdown"
    dropdown-class="profile-dropdown__content"
    placement="bottom-end"
    trigger="hover"
    :offset="12"
    teleport
  >
    <template #default="{ isActive }">
      <UiButton class="profile-dropdown__trigger" icon="circle-userpic" :state="isActive ? 'hover' : undefined" />
    </template>

    <template #dropdown>
      <UiDropdownItem class="mb-12" @click="navigateTo('/2fa')">
        <template #icon>
          <UiIconSProtection class="text-clr-cyan-400" />
        </template>

        <span>Безопасность</span>
      </UiDropdownItem>

      <UiDropdownItem class="mb-12" @click="navigateTo('/verification/status')">
        <template #icon>
          <UiIconSOverview class="text-clr-cyan-400" />
        </template>

        <span>Лимиты</span>
      </UiDropdownItem>

      <UiDropdownItem @click="navigateTo('/settings')">
        <template #icon>
          <UiIconSSettings class="text-clr-cyan-400" />
        </template>

        <span>Настройки</span>
      </UiDropdownItem>

      <UiDropdownSeparator />

      <UiDropdownItem @click="logout">
        <template #icon>
          <UiIconSExit class="text-clr-grey-400" />
        </template>

        <span>Logout</span>
      </UiDropdownItem>
    </template>
  </UiDropdown>
</template>

<script setup>
const { logout, authenticated } = useAuth()
</script>

<style lang="scss">
.profile-dropdown {
  cursor: pointer;

  &__trigger {
    --button-color: #{$clr-grey-500};
    --button-background: #{$clr-grey-200};
    --button-hover-color: #{$clr-white};
    --button-active-color: #{$clr-white};
  }

  &__content {
    @include txt-s-m('dropdown-item', true);

    --dropdown-item-padding: 8px 12px;

    position: relative;
    color: $clr-grey-600;
    width: 233px;
    padding: 16px !important;
    box-shadow: 0px 4px 4px 0px #6C86AD40;

    &::before {
      content: '';
      width: 16px;
      height: 16px;
      transform: rotateZ(45deg);
      position: absolute;
      top: -8px;
      right: 12px;
      background-color: $clr-white;
      border-radius: 2px;
    }
  }
}
</style>
