Locale

"use client"

import * as React from "react"
import { LocaleProvider } from "@/components/locale"
import { RelativeTime } from "@/components/relative-time"
import { Composer } from "@/components/composer"
import { Message } from "@/components/message"
import { Thread } from "@/components/thread"
import type { Message as MessageData } from "@/lib/chat"

const agent = { id: "a1", name: "وكيل الدعم", role: "assistant" }
const at = new Date(Date.now() - 4 * 60_000).toISOString()

const messages: MessageData[] = [
  { id: "u1", author: { role: "user" }, createdAt: at, status: "complete", blocks: [{ kind: "plain", text: "أين طلبي رقم 1042؟" }] },
  {
    id: "a1",
    author: { role: "agent", agent },
    createdAt: at,
    status: "complete",
    blocks: [{ kind: "paragraph", nodes: [{ kind: "text", text: "شُحن طلبك أمس، ويصل خلال يومين." }] }],
  },
]

/** Arabic, right to left: the provider sets the words, the locale and the direction; `dir` on the wrapper flips the layout. */
const arabic = {
  thread: { messages: "الرسائل", jumpToLatest: "الانتقال إلى الأحدث" },
  message: { you: "أنت" },
  composer: { label: "رسالة", placeholder: "اكتب سؤالك", send: "إرسال", hintSend: "إرسال", hintNewLine: "سطر جديد", hintMention: "إشارة" },
  relativeTime: { justNow: "الآن" },
}

export default function Example() {
  const [value, setValue] = React.useState("")
  return (
    <div className="flex flex-col gap-4">
      <LocaleProvider locale="ar" strings={arabic}>
        <div dir="rtl" lang="ar" className="h-80 overflow-hidden rounded-lg border">
          <Thread className="h-full" footer={<Composer value={value} onChange={setValue} onSubmit={() => setValue("")} />}>
            {messages.map((m) => (
              <Message key={m.id} message={m} />
            ))}
          </Thread>
        </div>
      </LocaleProvider>
      <LocaleProvider locale="fr-FR" timeZone="Europe/Paris">
        <p lang="fr" className="text-sm text-muted-foreground">
          Envoyé <RelativeTime date={at} /> · <RelativeTime date={at} format="datetime" />
        </p>
      </LocaleProvider>
    </div>
  )
}