import clsx from "clsx";
import type {UserDto} from "../../api/dtos/UserDto";

type UserListProps = {
    users: UserDto[];
    selectedUser: UserDto | null;
    onSelectUser: (user: UserDto) => void;
};

/**
 * UserList - Displays a list of users with selection
 */
export default function UserList({users, selectedUser, onSelectUser}: UserListProps) {

    const formatUserName = (user: UserDto) => {
        const parts = [];
        if (user.lastName) parts.push(user.lastName);
        if (user.firstName) parts.push(user.firstName);
        return parts.length > 0 ? parts.join(", ") : "";
    };

    return (
        <div className="border-r border-gray-300 h-full">
            <h2 className="px-4 py-2">Benutzer</h2>
            <ul>
                {users.map((user) => (
                    <li
                        key={user.id ?? user.userName}
                        className={clsx(
                            "px-4 py-3 cursor-pointer hover:bg-gray-200 transition-colors border-b border-gray-300",
                            selectedUser?.id === user.id && "bg-blue-100 hover:bg-blue-200"
                        )}
                        onClick={() => {
                            onSelectUser(user)
                        }}
                    >
                        <div className={clsx(
                            "text-base",
                            selectedUser?.id === user.id && "font-semibold"
                        )}>
                            {formatUserName(user)}
                        </div>
                        <div className="text-sm text-gray-600 mt-1">
                            {user.userName}
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
}