// components/users/UsersTable.jsx
import RoleBadge from "@/Components/Users/RoleBadge";
import EditUserButton from "@/Components/Users/EditUserButton";
import DeleteUserButton from "@/Components/Users/DeleteUserButton";
import { formatDate } from "@/utils/Global";

export default function UsersTable({ users, onEdit, onDelete }) {
  return (
    <div className="mt-4 rounded-3xl border border-black/10 bg-white shadow-sm overflow-hidden">
      <div className="px-4 sm:px-6 py-4 border-b border-black/10 flex items-center justify-between">
        <div className="text-sm font-semibold text-black/75">
          Kullanıcı Listesi
        </div>
        <div className="text-xs text-black/45">Şifre tabloda gösterilmez.</div>
      </div>

      <div className="overflow-x-auto">
        <table className="min-w-[900px] w-full text-left">
          <thead className="bg-black/[0.02]">
            <tr className="text-xs font-semibold text-black/55">
              <th className="px-6 py-3">ID</th>
              <th className="px-6 py-3">İsim</th>
              <th className="px-6 py-3">Rol</th>
              <th className="px-6 py-3">Oluşturma</th>
              <th className="px-6 py-3">Güncelleme</th>
              <th className="px-6 py-3 text-right">İşlemler</th>
            </tr>
          </thead>

          <tbody className="divide-y divide-black/10">
            {users.map((u) => (
              <tr key={u.id} className="hover:bg-black/[0.015] transition">
                <td className="px-6 py-4 text-sm font-semibold text-black/75">
                  {u.id}
                </td>

                <td className="px-6 py-4">
                  <div className="text-sm font-semibold text-black/80">
                    {u.name}
                  </div>
                </td>

                <td className="px-6 py-4">
                  <RoleBadge role={u.role} />
                </td>

                <td className="px-6 py-4 text-sm text-black/60">
                  {formatDate(u.createdAt)}
                </td>

                <td className="px-6 py-4 text-sm text-black/60">
                  {formatDate(u.updatedAt)}
                </td>

                <td className="px-6 py-4">
                  <div className="flex justify-end gap-2">
                    <EditUserButton onClick={() => onEdit(u)} />
                    <DeleteUserButton onClick={() => onDelete(u)} />
                  </div>
                </td>
              </tr>
            ))}

            {users.length === 0 && (
              <tr>
                <td
                  colSpan={6}
                  className="px-6 py-10 text-center text-sm text-black/50"
                >
                  Sonuç bulunamadı.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}
