/* eslint-disable -- temporary disable for development/testing purposes */

'use client';
import React from 'react';
import { List, ListItem, ListItemAvatar, Avatar, ListItemText } from '@mui/material';

interface User {
  id: string;
  name: string;
  avatar?: string;
  profile?: string;

  role: string;
}

interface UserListProps {
  users: User[];
  onUserSelect: (user: User) => void;
}

export default function UserList({ users, onUserSelect }: UserListProps) {
  return (
    <List>
      {users.map((user) => (
        <ListItem button key={user.id} onClick={() => onUserSelect(user)}>
          <ListItemAvatar>
            <Avatar src={user.profile || `https://gohelloprovider.com/app/images/${user.profile}` || '/assets/Portrait_Placeholder.png'} />
          </ListItemAvatar>
          <ListItemText primary={user.name} secondary={user.role} />
        </ListItem>
      ))}
    </List>
  );
}