// components/Chat.js
import { h } from "sigpro";

export const Chat = (props, children) => {
    children === undefined && (children = props, props = {});
    return h("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
};

export const ChatImage = (props, children) => {
    children === undefined && (children = props, props = {});
    return h("div", { ...props, class: `chat-image avatar ${props.class ?? ''}` },
        h("div", { class: "w-10 rounded-full" },
            typeof children === "string" ? h("img", { src: children, alt: "avatar" }) : children
        )
    );
};

export const ChatHeader = (props, children) => {
    children === undefined && (children = props, props = {});
    return h("div", { ...props, class: `chat-header ${props.class ?? ''}` }, children);
};

export const ChatFooter = (props, children) => {
    children === undefined && (children = props, props = {});
    return h("div", { ...props, class: `chat-footer ${props.class ?? ''}` }, children);
};

export const ChatBubble = (props, children) => {
    children === undefined && (children = props, props = {});
    return h("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children);
};

export const ChatMessage = (props) => {
  const { position = "start", avatar, header, message, footer, bubbleClass, ...rest } = props;
  
  return Chat({ ...rest, class: `chat-${position} ${props.class ?? ''}` }, [
    avatar && ChatImage(avatar),
    header && ChatHeader(header),
    ChatBubble({ class: bubbleClass }, message),
    footer && ChatFooter(footer)
  ]);
};