interface ChatBubbleProps {
  role: "user" | "character";
  text: string;
}

// H-3 動作描寫標記渲染：把 ＊…＊ 標記以暮空紫小字呈現，與台詞區分。
function renderContent(text: string) {
  const parts = text.split(/(＊[^＊]+＊)/g).filter(Boolean);
  return parts.map((part, index) => {
    const match = part.match(/^＊([^＊]+)＊$/);
    if (match) {
      return (
        <span key={index} className="text-xs" style={{ color: "var(--violet)" }}>
          {match[1]}
        </span>
      );
    }
    return <span key={index}>{part}</span>;
  });
}

export function ChatBubble({ role, text }: ChatBubbleProps) {
  const isUser = role === "user";
  return (
    <div
      className="max-w-[78%] rounded-2xl px-3.5 py-2 text-sm leading-relaxed"
      style={
        isUser
          ? {
              alignSelf: "flex-end",
              background: "var(--accent-bright)",
              color: "#fff",
              borderBottomRightRadius: 4,
            }
          : {
              alignSelf: "flex-start",
              background: "var(--bg-soft)",
              border: "1px solid var(--line)",
              borderBottomLeftRadius: 4,
            }
      }
    >
      {renderContent(text)}
    </div>
  );
}