"use client";

import { User } from "@/types/user";

type Props = {
  users: User[];
};

export default function UserTable({ users }: Props) {
  return (
    <div className="overflow-hidden rounded-xl border bg-white shadow">

      <table className="w-full">

        <thead className="bg-slate-100">

          <tr>

            <th className="p-4 text-left">ID</th>
            <th className="p-4 text-left">Benutzername</th>
            <th className="p-4 text-left">E-Mail</th>
            <th className="p-4 text-center">Aktionen</th>

          </tr>

        </thead>

        <tbody>

          {users.map((user) => (

            <tr
              key={user.id}
              className="border-t hover:bg-slate-50"
            >

              <td className="p-4">{user.id}</td>
              <td className="p-4">{user.username}</td>
              <td className="p-4">{user.email}</td>

              <td className="p-4 text-center">

                <button className="mr-3 rounded bg-blue-600 px-3 py-1 text-white hover:bg-blue-700">
                  Bearbeiten
                </button>

                <button className="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700">
                  Löschen
                </button>

              </td>

            </tr>

          ))}

        </tbody>

      </table>

    </div>
  );
}