admin/components/ui/UserDropdown.tsx

'use client'
import { useRouter } from 'next/navigation'
import { useMemo } from 'react'

import { Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger } from '@/components/heroui/Dropdown'
import { Avatar } from '@/components/heroui/Avatar'
import Button from '@/components/formElements/Button'
import LogoutIcon from '@/components/icons/LogoutIcon'
import { fileAddress } from '@/helpers'
import { resolveUserAvatarSrc } from '@/lib/resolveUserAvatarSrc'
import useAuth from '@/hooks/useAuth'
import useAlertModal from '@/hooks/useAlertModal'
import EditIcon from '@/components/icons/EditIcon'

const UserDropdown = () => {
  const { user, logout } = useAuth()
  const { showAlert } = useAlertModal()
  const router = useRouter()
  const disableKeys = useMemo(() => [], [])
  const avatarSrc = resolveUserAvatarSrc({
    avatarUrl: user?.avatarUrl ?? (user?.imageId ? fileAddress(user.imageId) : null),
    gender: user?.gender,
  })

  return (
    <>
      <Dropdown placement="bottom-start">
        <DropdownTrigger>
          <Button
            iconOnly
            aria-label="منوی حساب کاربری"
            className="rounded-full p-0"
            radius="full"
            variant="light"
          >
            <Avatar
              isBordered
              color="default"
              size="lg"
              src={avatarSrc}
            />
          </Button>
        </DropdownTrigger>

        <DropdownMenu
          aria-label="User Actions"
          disabledKeys={disableKeys}
          variant="flat"
        >
          <DropdownSection showDivider>
            <DropdownItem
              key="profile"
              startContent={<EditIcon className="size-4" />}
              onPress={() => {
                router.push('/profile/edit')
              }}
            >
              ویرایش پروفایل
            </DropdownItem>
          </DropdownSection>
          <DropdownItem
            key="logout"
            className="text-fourth"
            color="danger"
            startContent={<LogoutIcon className="size-4" />}
            onPress={() => {
              showAlert('برای خروج مطمئن هستید؟', logout)
            }}
          >
            خروج
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </>
  )
}

export default UserDropdown