"use client"

import * as React from "react"
import { RuleBuilder, type RuleGroup } from "@/registry/blocks/rule-builder/rule-builder"

const FIELDS = [
  { value: "country", label: "Country" },
  { value: "amount", label: "Amount" },
]

export default function RuleBuilderDemo() {
  const [value, setValue] = React.useState<RuleGroup>({
    id: "root",
    combinator: "and",
    rules: [
      { id: "c1", field: "country", operator: "eq", value: "KE" },
      { id: "c2", field: "amount", operator: "gt", value: "1000" },
    ],
  })

  return (
    <div className="w-full max-w-2xl">
      <RuleBuilder value={value} onChange={setValue} fields={FIELDS} />
    </div>
  )
}