Channel Message

import * as React from "react"
import { Mail, MessageCircle, MessagesSquare, Phone, Smartphone, Star } from "lucide-react"
import { cn } from "cn"

const CHANNELS = {
  call: { label: "Call", icon: Phone },
  whatsapp: { label: "WhatsApp", icon: MessageCircle },
  email: { label: "Email", icon: Mail },
  chat: { label: "Chat", icon: MessagesSquare },
  sms: { label: "SMS", icon: Smartphone },
  review: { label: "App review", icon: Star },
} as const

type Channel = keyof typeof CHANNELS

/**
 * A single customer utterance, labelled with the channel it arrived on.
 * Set `lang="ar"` for Arabic: the message renders RTL and `translation`
 * appears beneath it in the reader's language.
 */
function ChannelMessage({
  channel,
  label,
  lang,
  translation,
  className,
  children,
  ...props
}: React.ComponentProps<"figure"> & {
  channel: Channel
  /** Overrides the channel's default label. */
  label?: React.ReactNode
  /** Language of the message itself. Arabic, Farsi and Urdu render right to left. */
  lang?: string
  translation?: React.ReactNode
}) {
  const { label: defaultLabel, icon: Icon } = CHANNELS[channel]
  const rtl = lang ? /^(ar|fa|ur|he)\b/i.test(lang) : false

  return (
    <figure
      data-slot="channel-message"
      data-channel={channel}
      className={cn(
        "flex w-fit max-w-md flex-col gap-1 rounded-card bg-card px-4 pt-2.5 pb-3 text-card-foreground shadow-[0_1px_2px_color-mix(in_oklab,var(--ink),transparent_94%),0_8px_24px_-12px_color-mix(in_oklab,var(--ink),transparent_88%)] ring-1 ring-border",
        className
      )}
      {...props}
    >
      <figcaption className="flex items-center gap-1.5 text-[0.6875rem] font-medium tracking-[0.08em] text-muted-foreground uppercase">
        <Icon aria-hidden="true" className="size-3" strokeWidth={2} />
        {label ?? defaultLabel}
      </figcaption>
      <blockquote
        lang={lang}
        dir={rtl ? "rtl" : "auto"}
        className={cn(
          "text-[1.0625rem] leading-snug text-ink-2 dark:text-night-text",
          rtl && "text-[1.125rem] leading-normal"
        )}
      >
        {children}
      </blockquote>
      {translation ? (
        <p dir="auto" className="text-caption text-muted-foreground">{translation}</p>
      ) : null}
    </figure>
  )
}

export { ChannelMessage, CHANNELS }
export type { Channel }