/** eslint-disable @next/next/no-img-element */
import { User } from "@/interfaces/user"

interface Props {
  users: User[]
  title: string;
}

const UserDisplay = (displayUser: User) => (
  <div className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
    {/* eslint-disable-next-line @next/next/no-img-element */}
    <img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
    <div className="flex flex-col gap-1 items-start">
      <span>{displayUser.name}</span>
      <span className="text-sm opacity-75">{displayUser.email}</span>
    </div>
  </div>
);

export default function UserDisplayList({ title, users }: Props) {
  return (<div className="bg-white border shadow flex flex-col rounded-xl w-full">
    <span className="p-4">{title}</span>
    <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
      {users
        .slice(0, 10)
        .map((x) => (
          <UserDisplay key={x.id} {...x} />
        ))}
    </div>
  </div>)
}