import { MESSAGE_CUSTOM_TYPE } from '@linktr.ee/messaging-taxonomy'
import { LocalMessage } from 'stream-chat'

/** Check if a message is a tip based on metadata */
export const isTipMessage = (message: LocalMessage): boolean => {
  return message.metadata?.custom_type === MESSAGE_CUSTOM_TYPE.TIP
}

/** Tip pill — the gift-emoji bubble a tip message attaches, with or without accompanying text */
export const TipMessage = ({ message }: { message: LocalMessage }) => {
  const amountText = message.metadata?.amount_text
  if (!amountText) return null

  return (
    <div className="message-tip-pill inline-flex items-end gap-0.5 max-w-[520px] rounded-[1.5rem] bg-[#43e660] px-4 py-3 text-white">
      <span
        className="flex h-5 items-center text-[20px] leading-none"
        aria-hidden="true"
      >
        🎁
      </span>
      <span className="text-[14px] font-bold leading-[1.43] tracking-[0.28px] text-[rgba(4,4,3,0.9)]">
        {amountText} tip!
      </span>
    </div>
  )
}