interface Props{
    isWhiteBackground: boolean;
    menuImgUrl: string;
    menuTitle: string;
}

export function Menu (props: Props) {
    return(
        <div className="flex flex-col items-center">
            <div className={`relative rounded-full w-20 h-20 ${props.isWhiteBackground ? 'bg-white' : 'bg-gradient-to-br from-gray-300 to-white'}`}>
                <div className="absolute inset-0 flex flex-col items-center justify-center">
                    <img src={props.menuImgUrl} alt={props.menuTitle} className="w-8 h-8 object-contain" />
                    <p className="mt-1 text-center text-black text-xs">{props.menuTitle}</p>
                </div>
            </div>
        </div>
    )
}