"use client"

import * as React from "react"
import { TranslationEditor } from "@/registry/blocks/translation-editor/translation-editor"

const LANGUAGES = [
  { code: "en", label: "English" },
  { code: "fr", label: "Français" },
  { code: "es", label: "Español" },
]

export default function TranslationEditorDemo() {
  const [value, setValue] = React.useState<Record<string, string>>({
    en: "Welcome to our platform.",
    fr: "Bienvenue sur notre plateforme.",
    es: "Bienvenido a nuestra plataforma.",
  })

  return (
    <div className="w-full max-w-lg">
      <TranslationEditor
        languages={LANGUAGES}
        value={value}
        onChange={setValue}
        fieldLabel="Description"
        multiline
      />
    </div>
  )
}