type Locale =
  | "en" // English (default)
  | "es" // Spanish
  | "fr" // French
  | "de" // German
  | "it" // Italian
  | "pt" // Portuguese
  | "ja" // Japanese
  | "ko" // Korean
  | "zh"; // Chinese

import { FanfareProvider } from "@waitify-io/fanfare-sdk-react";

function App() {
  return (
    <FanfareProvider organizationId="org_xxx" publishableKey="pk_live_xxx" locale="es">
      <YourApp />
    </FanfareProvider>
  );
}

registerWebComponents({
  organizationId: "org_xxx",
  publishableKey: "pk_live_xxx",
  locale: "fr",
});

<FanfareProvider
  organizationId="org_xxx"
  publishableKey="pk_live_xxx"
  locale="en"
  translations={{
    "queue.enter": "Join the Line",
    "queue.leave": "Leave the Line",
    "queue.position": "Your place: {{position}}",
    "admitted.title": "You're In!",
    "admitted.cta": "Start Shopping",
    "draw.enter": "Enter the Raffle",
    "draw.withdraw": "Remove Entry",
    "auction.placeBid": "Place Your Bid",
    "auction.winning": "Highest Bidder!",
    "auction.outbid": "You've Been Outbid",
  }}
>
  <YourApp />
</FanfareProvider>

import { useTranslations } from "@waitify-io/fanfare-sdk-react";

function MyComponent() {
  const t = useTranslations();

  return (
    <div>
      <h1>{t("queue.admitted")}</h1>
      <p>{t("queue.position", { position: 42 })}</p>
      <button>{t("admitted.cta")}</button>
    </div>
  );
}

// Translation: "Position: {{position}} of {{total}}"
t("queue.positionOf", { position: 5, total: 100 });
// Result: "Position: 5 of 100"

// Translation: "Estimated wait: {{time}}"
t("queue.estimatedWait", { time: "5 minutes" });
// Result: "Estimated wait: 5 minutes"

import { useState } from "react";
import { FanfareProvider, type Locale } from "@waitify-io/fanfare-sdk-react";

function App() {
  const [locale, setLocale] = useState<Locale>("en");

  return (
    <FanfareProvider organizationId="org_xxx" publishableKey="pk_live_xxx" locale={locale}>
      <select value={locale} onChange={(e) => setLocale(e.target.value as Locale)}>
        <option value="en">English</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
        <option value="de">Deutsch</option>
      </select>
      <YourApp />
    </FanfareProvider>
  );
}

const RTL_LOCALES = ["ar", "he", "fa", "ur"];

// Check if current locale is RTL
import { isRTLLocale } from "@waitify-io/fanfare-sdk-react";

if (isRTLLocale(locale)) {
  document.documentElement.dir = "rtl";
}

function ExperiencePage({ experienceId }: { experienceId: string }) {
  // Experience-level i18n is automatically loaded
  const { status } = useExperienceJourney(experienceId, { autoStart: true });

  // Translations from the experience are now available
  const t = useTranslations();

  return <div>{t("custom.experienceTitle")}</div>;
}

import { mergeTranslations, en } from "@waitify-io/fanfare-sdk-react";

const customTranslations = mergeTranslations(en, {
  "queue.enter": "Get in Line",
  "custom.myKey": "My custom text",
});

import type {
  Locale,
  TranslationKey,
  TranslationMessages,
  PartialTranslationMessages,
} from "@waitify-io/fanfare-sdk-react";

const myTranslations: PartialTranslationMessages = {
  "queue.enter": "Join Queue",
};