/* ============================================================================
 * 서명전에 — TDS Bubble 컴포넌트
 *  · 대화형 UI 용 말풍선. 주체(나/상대방)를 색으로 구분.
 *  · props:
 *      background  "blue" (나) | "grey" (상대방) — required
 *      withTail    boolean (기본 true) — 꼬리 표시 여부.
 *                  · blue 이면 우측 하단, grey 이면 좌측 하단에 꼬리가 붙어요.
 *      className, style, onClick, aria-* 등 HTMLDivElement 속성 전부 패스스루.
 *      children    React.ReactNode — 문자열이 일반적이지만 로티·이미지 등도 가능.
 *
 *  · 정렬(좌/우)은 Bubble 의 책임이 아니에요. 호출부에서 flex 부모를
 *      justifyContent: "flex-start" (grey) / "flex-end" (blue)
 *    로 잡아주세요. TDS 원본 예시와 동일한 계약이에요.
 *
 *  · 색/사이즈/꼬리 형태는 components.css 의 .bubble 블록이 담당.
 * ========================================================================== */

function Bubble({
  background,
  withTail = true,
  className = "",
  children,
  ...rest
}) {
  // background 누락 시 개발 중 빠르게 알아차릴 수 있게 콘솔에만 경고.
  if (background !== "blue" && background !== "grey") {
    if (window.console && console.warn) {
      console.warn(
        "[Bubble] `background` prop 은 'blue' 또는 'grey' 만 허용합니다. 받은 값:",
        background,
      );
    }
  }

  const cls = [
    "bubble",
    `bubble--${background || "grey"}`,
    withTail ? "bubble--tail" : "bubble--notail",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div className={cls} {...rest}>
      <span className="bubble__content">{children}</span>
    </div>
  );
}

window.Bubble = Bubble;

Object.assign(window, { Bubble });