import React from "react";
import { connect } from "react-redux";
import { backURL } from "../constants";

function getUrl(obj) {
    if (obj.avatar?.url) {
        return backURL + obj.avatar?.url;
    } else {
        return false;
    }
}

export const UserAvatar = ({ profile, text = "", className = "small" }) => {
    return (
        <>
            <div style={{display: "flex", alignItems: 'center'}}>
                <img className={className} src={getUrl(profile)} />
                <p>{text}</p>
            </div>
            
        </>
    );
};

export const CMyAvatar = connect((state) => ({
    profile: state.promise.myProfile?.payload || {},
}))(UserAvatar);

export const ChatAvatar = ({ chat, className = "small" }) => {
    return (
        <>
            <div className={className} style={{backgroundColor: "gray"}}></div>
        </>
    )
}

export const CChatAvatar = connect((state) => ({
    profile: state.promise.userChats?.payload || {},
}))(UserAvatar);

