import { cn } from "@/lib/utils"

/**
 * One string in both languages, English above Thai.
 *
 * These screens are read on shared terminals, so there is no language
 * switcher: a switcher stores a preference on a device that belongs to
 * nobody, and the next person to walk up inherits somebody else's choice.
 * 183 of the 193 people on file have Thai names, so a switcher that defaults
 * to English defaults wrong for almost everybody, and it hides the fix behind
 * a control labelled in the language they cannot read.
 *
 * Both lines are the same size. The Thai is not small print: it is the line
 * most people here will actually read. `text-foreground/80` separates the two
 * lines without letting either recede, which is what the design rules allow a
 * line to do.
 *
 * `lang="th"` is what lets a browser pick Thai line breaking and hand the
 * right voice to a screen reader. Prompt carries both scripts, so the pair is
 * set in one typeface.
 */
export function Bilingual({
  en,
  th,
  className,
  thClassName,
}: {
  en: React.ReactNode
  th: React.ReactNode
  className?: string
  thClassName?: string
}) {
  return (
    <span className={cn("flex flex-col gap-0.5", className)}>
      <span>{en}</span>
      <span lang="th" className={cn("text-foreground/80", thClassName)}>
        {th}
      </span>
    </span>
  )
}