import React from 'react';
import { User } from '../types';
import { XIcon } from './icons/XIcon';

interface UserListModalProps {
  title: string;
  userIds: string[];
  users: User[];
  onClose: () => void;
  onNavigate: (view: 'profile', userId: string) => void;
}

const UserListModal: React.FC<UserListModalProps> = ({ title, userIds, users, onClose, onNavigate }) => {
  const userObjects = userIds.map(id => users.find(u => u.id === id)).filter(Boolean) as User[];

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" onClick={onClose}>
      <div className="bg-background rounded-lg shadow-xl w-full max-w-sm border border-accent" onClick={(e) => e.stopPropagation()}>
        <div className="flex justify-between items-center p-4 border-b border-muted">
          <h2 className="text-lg font-bold">{title}</h2>
          <button onClick={onClose} className="text-secondary hover:text-foreground">
            <XIcon className="w-6 h-6" />
          </button>
        </div>
        <div className="p-4 max-h-80 overflow-y-auto">
          {userObjects.length > 0 ? (
            <ul className="space-y-3">
              {userObjects.map(user => (
                <li key={user.id} className="flex items-center gap-3">
                  <img src={user.avatar} alt={user.username} className="w-10 h-10 rounded-full object-cover" />
                  <span 
                    className="font-semibold hover:underline cursor-pointer"
                    onClick={() => onNavigate('profile', user.id)}
                  >
                    {user.username}
                  </span>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-muted-foreground text-center py-4">No users to display.</p>
          )}
        </div>
      </div>
    </div>
  );
};

export default UserListModal;