Field

"use client"

import { Form } from "react-aria-components"

import { Button } from "@/components/ui/preskok-ui/button"
import {
  Description,
  FieldError,
  Fieldset,
  Label,
  Legend,
} from "@/components/ui/preskok-ui/field"
import { Input } from "@/components/ui/preskok-ui/input"
import { Text } from "@/components/ui/preskok-ui/text"
import { TextField } from "@/components/ui/preskok-ui/text-field"

export function FieldDemo() {
  return (
    <Form>
      <Fieldset>
        <Legend>Profile information</Legend>
        <Text>
          Update your account's profile information and email address.
        </Text>

        <TextField isRequired name="name">
          <Label>Name</Label>
          <Input />
          <FieldError />
          <Description>This is your public display name.</Description>
        </TextField>
        <TextField isRequired name="email">
          <Label>Email</Label>
          <Description>This is your public display name.</Description>
          <Input type="email" />
          <FieldError />
        </TextField>
        <TextField isRequired name="password">
          <Label>Password</Label>
          <Input type="password" />
          <FieldError />
        </TextField>
        <div data-slot="control">
          <Button type="submit">Register</Button>
        </div>
      </Fieldset>
    </Form>
  )
}