import { forwardRef } from "react";

/**
 * Chat
 *
 * position: "start" | "end" (default: "start")
 * bubble:   "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "danger"
 * avatar:   ReactNode - rendered in .prs-chat-image; typically an <Avatar> or <img>
 * header:   ReactNode - sender name; include a <time> for the timestamp
 * footer:   ReactNode - delivery status, reactions, etc.
 */
const Chat = forwardRef(function Chat(
  {
    position = "start",
    bubble,
    avatar,
    header,
    footer,
    className = "",
    children,
    ...props
  },
  ref
) {
  const classes = [
    "prs-chat",
    position === "end" ? "prs-chat-end" : "prs-chat-start",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  const bubbleClasses = [
    "prs-chat-bubble",
    bubble === "primary"   && "prs-chat-bubble-primary",
    bubble === "secondary" && "prs-chat-bubble-secondary",
    bubble === "accent"    && "prs-chat-bubble-accent",
    bubble === "info"      && "prs-chat-bubble-info",
    bubble === "success"   && "prs-chat-bubble-success",
    bubble === "warning"   && "prs-chat-bubble-warning",
    bubble === "danger"    && "prs-chat-bubble-danger",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div ref={ref} className={classes} {...props}>
      {avatar && (
        <div className="prs-chat-image">{avatar}</div>
      )}
      {header && (
        <div className="prs-chat-header">{header}</div>
      )}
      <div className={bubbleClasses}>{children}</div>
      {footer && (
        <div className="prs-chat-footer">{footer}</div>
      )}
    </div>
  );
});

export default Chat;