<Fieldset />

import React from "react"
import {Forms, useForm, showToast} from "attio/client"

export function FieldsetRadioDialog() {
  const {Form, SubmitButton, Experimental_Fieldset, Experimental_RadioGroup} = useForm(
    {
      priority: Forms.string(),
    },
    {
      priority: "medium",
    },
  )
  return (
    <Form
      onSubmit={async (values) => {
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: `Selected priority: ${values.priority}`,
        })
      }}
    >
      <Experimental_Fieldset legend="Priority">
        <Experimental_RadioGroup name="priority">
          <Experimental_RadioGroup.Item value="low" label="Low" />
          <Experimental_RadioGroup.Item value="medium" label="Medium" />
          <Experimental_RadioGroup.Item value="high" label="High" />
        </Experimental_RadioGroup>
      </Experimental_Fieldset>
      <SubmitButton label="Submit" />
    </Form>
  )
}

import React from "react"
import {Forms, useForm, showToast} from "attio/client"

export function FieldsetCheckboxDialog() {
  const {Form, SubmitButton, Experimental_Fieldset, Checkbox} = useForm(
    {
      emailNotifications: Forms.boolean(),
      smsNotifications: Forms.boolean(),
      pushNotifications: Forms.boolean(),
    },
    {
      emailNotifications: true,
      smsNotifications: false,
      pushNotifications: true,
    },
  )
  return (
    <Form
      onSubmit={async (values) => {
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: JSON.stringify(values),
        })
      }}
    >
      <Experimental_Fieldset legend="Notification preferences">
        <Checkbox label="Email" name="emailNotifications" />
        <Checkbox label="SMS" name="smsNotifications" />
        <Checkbox label="Push notifications" name="pushNotifications" />
      </Experimental_Fieldset>
      <SubmitButton label="Submit" />
    </Form>
  )
}