import { FC } from 'react';

export const GroupRightPanel: FC = () => {
    const items = [
        {
            name: 'Игнат Герасименко',
            role: 'Администратор',
        },
        {
            name: 'Алиса Макаренко',
            role: 'Модератор',
        },
        {
            name: 'Федор Картман',
            role: 'Модератор',
        },
        {
            name: 'Карина Механаджанович',
            role: 'Участник',
        },
        {
            name: 'Михаил Ангрский',
            role: 'Участник',
        },
        {
            name: 'newuser',
            role: 'Участник (Вы)',
        },
    ];
    return (
        <div className="h-screen w-full  overflow-y-scroll thin-dark-scrollbar p-[20px] gap-[5px] flex flex-col">
            <div className="text-liquid-white font-bold text-[18px]">
                Пользователи
            </div>

            {items.map((v, i) => {
                return (
                    <>
                        {
                            <div className="text-liquid-light text-[16px] grid grid-cols-[40px,1fr] gap-[10px] items-center cursor-pointer hover:bg-liquid-lighter transition-all duration-300 rounded-[10px] p-[5px]">
                                <div className="h-[40px] w-[40px] rounded-[10px] bg-[#D9D9D9]"></div>
                                <div className="flex flex-col">
                                    <div className="text-liquid-white font-bold text-[16px] leading-5">
                                        {v.name}
                                    </div>
                                    <div className="text-liquid-light font-normal text-[16px] leading-5">
                                        {v.role}
                                    </div>
                                </div>
                            </div>
                        }
                        {i + 1 != items.length && (
                            <div className="h-[1px] w-full bg-liquid-lighter"></div>
                        )}
                    </>
                );
            })}
        </div>
    );
};