import { EllipsisVertical } from "lucide-react"

import { useState } from "react"

import type { UserPublic } from "@/client"

import { Button } from "@/components/ui/button"

import {

  DropdownMenu,

  DropdownMenuContent,

  DropdownMenuTrigger,

} from "@/components/ui/dropdown-menu"

import useAuth from "@/hooks/useAuth"

import DeleteUser from "./DeleteUser"

import EditUser from "./EditUser"

interface UserActionsMenuProps {

  user: UserPublic

}

  const [open, setOpen] = useState(false)

  const { user: currentUser } = useAuth()

  if (user.id === currentUser?.id) {

    return null

  }

  return (

    <DropdownMenu open={open} onOpenChange={setOpen}>

      <DropdownMenuTrigger asChild>

        <Button variant="ghost" size="icon">

          <EllipsisVertical />

        </Button>

      </DropdownMenuTrigger>

      <DropdownMenuContent align="end">

        <EditUser user={user} onSuccess={() => setOpen(false)} />

        <DeleteUser id={user.id} onSuccess={() => setOpen(false)} />

      </DropdownMenuContent>

    </DropdownMenu>

  )

}