import { FormField, TextInput } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Form Field',
  group: 'Blocks',
  section: 'components',
  icon: 'edit',
  component: FormField,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Default',
    type: 'component',
    description: 'Form field with label, description, and error text.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      return (
        <div style={{ width: 700 }}>
          <FormField label="Title">
            <TextInput placeholder="Add a title" onChange={() => {}} />
          </FormField>
        </div>
      )
    },
  },
  {
    name: 'With note',
    type: 'component',
    description: 'Form field with label and a note.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => {
      return (
        <div style={{ width: 700 }}>
          <FormField
            label="Title"
            note={{
              title: 'About title visibility',
              description:
                'Titles will be displayed on the landing page withing the feed, and in browser tabs.',
            }}
          >
            <TextInput placeholder="Add a title" onChange={() => {}} />
          </FormField>
        </div>
      )
    },
  },
]
