"use client"

import * as React from "react"
import { ArrayItemTranslationFields } from "@/registry/ui/array-item-translation-fields"

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

export default function ArrayItemTranslationFieldsDemo() {
  const [items, setItems] = React.useState<Record<string, string>[]>([
    { en: "Fast", fr: "Rapide", es: "Rápido" },
    { en: "Secure", fr: "Sécurisé", es: "Seguro" },
  ])

  return (
    <div className="w-full max-w-md">
      <ArrayItemTranslationFields
        languages={LANGUAGES}
        items={items}
        onChange={setItems}
        addLabel="Add feature"
      />
    </div>
  )
}