"use client"

import { useState } from "react"
import { DataTable } from "./data-table"
import { columns, User } from "./column"
import { useQuery } from "react-query"
import { getUsers } from "../../user-management/action"
import { UserDetailSheet } from "./sheet"


export function UsersTable() {
  const [selectedUser, setSelectedUser] = useState<User | null>(null)
  const [sheetOpen, setSheetOpen] = useState(false)

  const { data: users = [], isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: getUsers,
  })

  const handleRowClick = (user: User) => {
    setSelectedUser(user)
    setSheetOpen(true)
  }

  if (isLoading) {
    return <div>Loading...</div>
  }

  return (
    <div className="w-full">
      <DataTable columns={columns} data={users} onRowClick={handleRowClick} />
      {selectedUser && <UserDetailSheet user={selectedUser} open={sheetOpen} onOpenChange={setSheetOpen} />}
    </div>
  )
}