// src/components/manajemenUsers/UserTable.tsx

import type { UserType } from "../../routes/ManajementUsers";

type Props = {
  users: UserType[];
  selectedRole: string;
  search: string;
  onEdit: (
    user: UserType
  ) => void;
  onDelete: (
    id: string
  ) => void;
};

export default function UsersTable({
  users,
  selectedRole,
  search,
  onEdit,
  onDelete,
}: Props) {
  
  /* FILTER */
  const filteredUsers =
    users.filter((user) => {
      const matchRole =
        selectedRole === "Semua" ||
        user.role === selectedRole;

      const matchSearch =
        user.nama
          .toLowerCase()
          .includes(
            search.toLowerCase()
          );

      return (
        matchRole &&
        matchSearch
      );
    });

  return (
    <div className="bg-white rounded-3xl shadow-lg p-6 overflow-x-auto">
      
      <table className="w-full text-left">
        
        {/* HEADER */}
        <thead>
          <tr className="border-b text-gray-700">
            <th className="p-3">ID</th>
            <th className="p-3">Nama</th>
            <th className="p-3">Role</th>
            <th className="p-3">Kelas</th>
            <th className="p-3">Status</th>
            <th className="p-3 text-center min-w-[180px]">
              Aksi
            </th>
          </tr>
        </thead>

        {/* BODY */}
        <tbody>
          {filteredUsers.map(
            (user) => (
              <tr
                key={user.id}
                className="border-b hover:bg-gray-50"
              >
                <td className="p-3">
                  {user.id}
                </td>

                <td className="p-3 font-medium">
                  {user.nama}
                </td>

                <td className="p-3">
                  {user.role}
                </td>

                <td className="p-3">
                  {user.kelas}
                </td>

                <td className="p-3">
                  <span
                    className={`px-3 py-1 rounded-full text-sm ${
                      user.status === "Aktif"
                        ? "bg-green-100 text-green-700"
                        : "bg-red-100 text-red-700"
                    }`}
                  >
                    {user.status}
                  </span>
                </td>

                {/* AKSI */}
                <td className="p-3">
                  <div className="flex justify-center gap-3">
                    
                    {/* EDIT */}
                    <button
                      onClick={() =>
                        onEdit(user)
                      }
                      className="bg-blue-600 text-white px-4 py-2 rounded-xl hover:bg-blue-700 transition"
                    >
                      Edit
                    </button>

                    {/* HAPUS */}
                    <button
                      onClick={() =>
                        onDelete(
                          user.id
                        )
                      }
                      className="bg-red-600 text-white px-4 py-2 rounded-xl hover:bg-red-700 transition"
                    >
                      Hapus
                    </button>

                  </div>
                </td>
              </tr>
            )
          )}
        </tbody>
      </table>
    </div>
  );
}