import { FormFieldGroup } from './FormFieldGroup.js'
import { FormField } from './FormField.js'
import { TextInput } from '../TextInput/index.js'

export const Default = () => {
  return (
    <FormFieldGroup>
      <FormField label="Label">
        <TextInput onChange={() => {}} />
      </FormField>
      <FormField label="Label" description="Description text">
        <TextInput onChange={() => {}} />
      </FormField>
      <FormField label="Label" error="Error text">
        <TextInput error onChange={() => {}} />
      </FormField>
      <FormField
        label="Label"
        description="Description text"
        error="Error text"
      >
        <TextInput error onChange={() => {}} />
      </FormField>
    </FormFieldGroup>
  )
}

export const WithTitleAndDescription = () => {
  return (
    <FormFieldGroup
      label="Article"
      description="Set up the article's title, lead, cover image and meta information"
    >
      <FormField label="Label">
        <TextInput onChange={() => {}} />
      </FormField>
      <FormField label="Label" description="Description text">
        <TextInput onChange={() => {}} />
      </FormField>
      <FormField label="Label" error="Error text">
        <TextInput error onChange={() => {}} />
      </FormField>
      <FormField
        label="Label"
        description="Description text"
        error="Error text"
      >
        <TextInput error onChange={() => {}} />
      </FormField>
    </FormFieldGroup>
  )
}
