import React from "react";
import { Link } from "react-router-dom";

const UserRow = ({ user, index }) => {
  return (
    <tr className="border-b hover:bg-gray-50">
      <td className="px-4 py-3">{index + 1}</td>
      <td className="px-4 py-3 font-medium text-gray-900">
        {user.firstName} {user.lastName}
      </td>
      <td className="px-4 py-3">{user.email}</td>
      <td className="px-4 py-3">{user.username}</td>
      <td className="px-4 py-3">{user.role}</td>
      <td className="px-4 py-3">
        {user.isVerified ? (
          <span className="text-green-600 font-medium">Yes</span>
        ) : (
          <span className="text-red-500 font-medium">No</span>
        )}
      </td>
      <td className="px-4 py-3">
        {user.isActive ? (
          <span className="text-green-600 font-medium">Active</span>
        ) : (
          <span className="text-gray-400 font-medium">Inactive</span>
        )}
      </td>
      <td className="px-4 py-3 text-gray-500">
        {user.lastLoginAt
          ? new Date(user.lastLoginAt).toLocaleDateString()
          : "Never"}
      </td>
      <td className="px-4 py-3">
        <Link
          to={`/users/${user.id}`} // ✅ IMPORTANT: use correct field name here
          className="text-blue-600 hover:underline font-medium"
        >
          View
        </Link>
      </td>
    </tr>
  );
};

export default UserRow;
