"use client";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@radix-ui/react-dropdown-menu";
import React from "react";
import {Button} from "./ui/button";

import ProfileLogoutDropdown from "./ProfileLogoutDropdown";
import {useQueryClient} from "@tanstack/react-query";
import {ChevronDown, User} from "lucide-react";
import { MeResponse } from "@/hooks";

export default function ProfileDropdown() {
  const qc = useQueryClient();
  const user:MeResponse = qc.getQueryData(["me"])!;

  return (
    <div>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button className="bg-white text-sm" variant="outline">
            <>
              <User />
              <span className="text-sm">
                {user?.data?.username || "کاربر سیستم"} 
                {/* (
                {user?.data?.translations[0]?.displayName}) */}
              </span>
              <ChevronDown />
            </>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          className="w-fit p-4 bg-white shadow rounded-lg space-y-4 z-10"
          align="start"
        >
          <DropdownMenuItem className="border-none outline-none ring-0 hover:text-primary transition-colors text-sm">
            ویرایش پروفایل
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <ProfileLogoutDropdown />
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}
