DRY & KISS Principles

function DataTable({ data, onEdit, onDelete }) {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td>
              <div className="flex items-center space-x-2">
                <img
                  src={item.avatar}
                  alt={item.name}
                  className="w-8 h-8 rounded-full"
                />
                <span className="font-medium">{item.name}</span>
              </div>
            </td>
            <td>
              <div className="flex items-center space-x-2">
                <MailIcon className="w-4 h-4 text-gray-400" />
                <span>{item.email}</span>
              </div>
            </td>
            <td>
              <div className="flex items-center space-x-2">
                <UserIcon className="w-4 h-4 text-gray-400" />
                <span>{item.role}</span>
              </div>
            </td>
            <td>
              <div className="flex items-center space-x-2">
                <StatusIcon className="w-4 h-4 text-gray-400" />
                <span>{item.status}</span>
              </div>
            </td>
            <td>
              <div className="flex items-center space-x-2">
                <button
                  onClick={() => onEdit(item)}
                  className="p-2 text-blue-600 hover:bg-blue-50 rounded-full"
                >
                  <EditIcon className="w-4 h-4" />
                </button>
                <button
                  onClick={() => onDelete(item)}
                  className="p-2 text-red-600 hover:bg-red-50 rounded-full"
                >
                  <DeleteIcon className="w-4 h-4" />
                </button>
              </div>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}