import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import format from "date-fns/format";
import {cn} from "@/lib/utils";


type SessionChatBubbleProps = {
    dateSent: Date | string | number;
    senderName: string;
    senderAvatar?: string | null;
    message?: string | null;
    messageStatus?: string;
    isReply: boolean;
    isSystemMessage: boolean;
}


export default function SessionChatBubble(props: SessionChatBubbleProps) {
    const today = new Date();
    const isReply = false;

    return (
        <>

            {
                props.isSystemMessage
                    ? (
                        <SystemMessageChatBubble systemMessage={props.message}/>
                    ) : (
                        <div className={cn(
                            "flex items-start gap-2.5 p-4",
                            isReply && "flex-row-reverse"
                        )}>
                            {
                                !props.isReply &&
                                <Avatar>
                                    <AvatarImage alt={"LI"}/>
                                    <AvatarFallback>
                                        {"Lindelwa Dlamini"
                                            .split(" ")
                                            .map((chunk) => chunk[0])
                                            .join("")}
                                    </AvatarFallback>
                                </Avatar>
                            }
                            <div
                                className="flex flex-col w-full max-w-[620px] leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
                                <div className="flex items-center justify-between space-x-2 rtl:space-x-reverse">
                        <span className="text-sm font-semibold text-gray-900 dark:text-white">
                            Bonnie Green
                        </span>
                                    <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
                            {today && (
                                <div className="ml-auto text-xs text-muted-foreground">
                                    {format(new Date(today), "PPpp")}
                                </div>
                            )}
                        </span>
                                </div>

                                <p className="text-sm font-normal py-2.5 text-gray-900 dark:text-white">
                                    That's awesome. I think our users will really appreciate the improvements.
                                </p>

                                <span className="text-sm font-normal text-gray-500 dark:text-gray-400">Delivered</span>
                            </div>
                        </div>
                    )
            }


        </>
    )
}


function SystemMessageChatBubble({systemMessage}: { systemMessage?: string | null }) {
    return (
        <div
            className="max-w-[400px] m-2 items-center justify-center p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:bg-gray-700 dark:border-gray-600">
            <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
                {systemMessage}
            </div>
        </div>
    )
}