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

export const Chat = (props, children) => {
  const { class: className, ...rest } = props;
  return Tag("div", {
    ...rest,
    class: `chat ${className || ''}`.trim()
  }, children);
};

export const ChatImage = (props, children) => {
  const { class: className, ...rest } = props;
  return Tag("div", {
    ...rest,
    class: `chat-image ${className || ''}`.trim()
  }, children);
};

export const ChatHeader = (props, children) => {
  const { class: className, ...rest } = props;
  return Tag("div", {
    ...rest,
    class: `chat-header ${className || ''}`.trim()
  }, children);
};

export const ChatFooter = (props, children) => {
  const { class: className, ...rest } = props;
  return Tag("div", {
    ...rest,
    class: `chat-footer ${className || ''}`.trim()
  }, children);
};

export const ChatBubble = (props, children) => {
  const { class: className, ...rest } = props;
  return Tag("div", {
    ...rest,
    class: `chat-bubble ${className || ''}`.trim()
  }, children);
};