import { cn } from "../../../lib/cn";
import { Book, UserAdd, Edit, EyeClosed, EyeOpen } from "../../../assets/icons/groups";

export interface GroupItemProps {
    id: number;
    role: "menager" | "member" | "owner" | "viewer";
    visible: boolean;
    name: string;
}


interface IconComponentProps {
    src: string;
}

const IconComponent: React.FC<IconComponentProps> = ({
    src
}) => {

    return <img 
    src={src}
    className="hover:bg-liquid-light rounded-[5px] cursor-pointer transition-all duration-300"
    />
}

const GroupItem: React.FC<GroupItemProps> = ({
    id, name, visible, role
}) => {
    console.log(id);
    return (
        <div className={cn("w-full h-[120px] box-border relative rounded-[10px] p-[10px] text-liquid-white bg-liquid-lighter",
        )}>
            <div className="grid grid-cols-[100px,1fr] gap-[20px]">
                <img src={Book} className="bg-liquid-brightmain rounded-[10px]"/>
                <div className="grid grid-flow-row grid-rows-[1fr,24px]">
                    <div className="text-[18px] font-bold">
                        {name}
                    </div>
                    <div className=" flex gap-[10px]">
                        {
                            (role == "menager" || role == "owner") && <IconComponent src={UserAdd}/>
                        }
                        {
                            (role == "menager" || role == "owner") && <IconComponent src={Edit}/>
                        }
                        {
                            visible == false && <IconComponent src={EyeOpen} />
                        }
                        {
                            visible == true && <IconComponent src={EyeClosed} />
                        }
                    </div>
                </div>
            </div>
        </div>
    );
};

export default GroupItem;