import type { Component } from "solid-js";
import { IMessageProps } from "./types";

const Message: Component<IMessageProps> = (props: IMessageProps) => {
    return (
        <li class="list-row p-3 hover:bg-stone-700">
            <div
                class="avatar cursor-pointer"
                onClick={() => props.onProfileClick?.(props.userId)}
            >
                <div class="w-10 rounded-full">
                    <img src={props.avatar} />
                </div>
            </div>
            <div>
                <div class="font-bold">{props.username}</div>
                {props.decryptionStatus ? (
                    <p class="list-col-wrap text-xs">{props.message}</p>
                ) : (
                    <p class="list-col-wrap text-xs italic">
                        Decryption failed
                    </p>
                )}
            </div>
        </li>
    );
};

export { Message };