Projects/front/src/components/admin/UserTable.tsx

import { useEffect, useState } from "react";
import api from "@/lib/api";
import { Trash2 } from "lucide-react";

interface UserRow {
  id: number;
  username: string;
  email?: string;
}

export function UserTable() {
  const [users, setUsers] = useState<UserRow[]>([]);

  useEffect(() => {
    api.get("/admin/users").then((res) => setUsers(res.data || [])).catch(() => setUsers([]));
  }, []);

  const deleteUser = async (id: number) => {
    await api.delete(`/admin/users/${id}`);
    setUsers((prev) => prev.filter((u) => u.id !== id));
  };

  return (
    <table className="w-full">
      <thead>
        <tr>
          <th>ID</th>
          <th>Username</th>
          <th>Email</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {users.map((u) => (
          <tr key={u.id}>
            <td>{u.id}</td>
            <td>{u.username}</td>
            <td>{u.email}</td>
            <td>
              <button onClick={() => deleteUser(u.id)}>
                <Trash2 className="w-4 h-4 text-red-500" />
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}