import React from 'react'

/**
 * In-channel chat-bubble tail (20×23), rendered as a real element at the last
 * bubble's bottom corner. Painted behind the bubble body (`z-index: -1`), so the
 * host bubble must be `relative` with `isolation: isolate`.
 *
 * The silhouette is the same 20×23 mask path shared by the card tails
 * (`.messaging-link-card-tail` in styles.css) and the standalone `MessageBubble`
 * preview — one source of truth for the shape. It stays a CSS `mask` because the
 * fill comes from the bubble-surface colour (so a plain `background-color` shows
 * through the shape), and the data-URI path isn't expressible in Tailwind.
 */
const TAIL_MASK =
  "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E\") no-repeat center / 100% 100%"

/**
 * Bubble surface colours, reused from the toolkit's Stream theme vars so the tail
 * is tinted the same as its bubble. Those vars live on `.str-chat`; the `var()`
 * fallbacks keep the tail correct if it ever renders outside a channel.
 */
const BG_BY_SIDE = {
  me: 'var(--str-chat__own-message-bubble-background-color, #1e2330)',
  other: 'var(--str-chat__message-bubble-background-color, #f1f0ee)',
} as const

/**
 * `me` tails hang off the right edge; `other` tails mirror to the left with
 * `scaleX(-1)`, matching the in-channel convention.
 */
export const MessageTail = ({ side }: { side: 'me' | 'other' }) => (
  <span
    aria-hidden="true"
    className="pointer-events-none absolute bottom-0 z-[-1] h-[1.4375rem] w-5"
    style={{
      insetInlineEnd: side === 'me' ? 'calc(-1 * 0.3125rem)' : undefined,
      insetInlineStart: side === 'other' ? 'calc(-1 * 0.3125rem)' : undefined,
      transform: side === 'other' ? 'scaleX(-1)' : undefined,
      transformOrigin: 'center',
      backgroundColor: BG_BY_SIDE[side],
      WebkitMask: TAIL_MASK,
      mask: TAIL_MASK,
    }}
  />
)