import type React from 'react'

/**
 * Which visual treatment the bubble paints. This is decoupled from message
 * *authorship*: it selects a side + colour, not who wrote the text. To preview
 * an outgoing message as the recipient will see it (e.g. a bulk-reply
 * confirmation), render the `received` treatment with your own text.
 */
export type MessageBubbleVariant = 'sent' | 'received'

export interface MessageBubbleBaseProps {
  /**
   * Message body. Rendered verbatim with `whitespace-pre-wrap` (newlines
   * preserved); this is a dumb component, so no markdown / link parsing.
   */
  text: string
  /**
   * Draw the bubble tail at the bottom corner. `sent` tails point
   * bottom-right, `received` bottom-left. Defaults to `true`.
   */
  tail?: boolean
  /**
   * Extra classes on the outer bubble. Width is caller-controlled: pass
   * `w-fit` to hug the text (chat/preview) or `w-full` to fill the container
   * (card-like list rows). With no width class the bubble fills its
   * container. Also where you'd set `max-w-[…]`.
   */
  className?: string
}

export interface SentBubbleProps extends MessageBubbleBaseProps {}

export interface ReceivedBubbleProps extends MessageBubbleBaseProps {
  /**
   * Optional header rendered above the text inside the bubble — used by the
   * Stacks message list to show the sender's name. Omit for a plain bubble.
   */
  header?: React.ReactNode
}