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

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

const Template: Story<FormProps> = (args: any) => {
  return (
    <Form
      onSubmit={(values) => {
        console.log(values)
      }}
      {...args}
    >
      <FormLayout>
        <TextField
          name="username"
          label="Username"
          placeholder="Enter a username"
        />
        <Button submit>Example</Button>
      </FormLayout>
    </Form>
  )
}
export const onSubmit = Template.bind({})
onSubmit.args = {}
