import React from 'react'
import { Story, Meta } from '@storybook/react'
import { Form } from '../Form/Form'
import { FormLayout, FormLayoutProps } from './FormLayout'
import { TextField } from '../TextField/TextField'

export default {
  title: 'Forms/FormLayout',
  component: FormLayout,
  argTypes: {}
} as Meta

const Template: Story<FormLayoutProps> = () => {
  return (
    <Form
      onSubmit={(values) => {
        console.log(values)
      }}
    >
      <FormLayout>
        <TextField name="username" label="Username" placeholder="Username" />
        <TextField
          name="password"
          type="password"
          label="Password"
          placeholder="Secure password"
        />
      </FormLayout>
    </Form>
  )
}
export const DefaultLayout = Template.bind({})
DefaultLayout.args = {}
