import React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";

import { ThemeProvider } from "../ThemeProvider";
import FormControl, { FormControlProps } from "./FormControl";
import Input from "../input/Input";

export default {
  title: "Components/Input/FormControl",
  component: FormControl,
} as Meta;

const Template: Story<FormControlProps> = (args) => {
  const [value, setValue] = React.useState("");
  return (
    <ThemeProvider>
      <FormControl {...args}>
        <Input value={value} onChange={(e) => setValue(e.target.value)} />
      </FormControl>
    </ThemeProvider>
  );
};

export const Default = Template.bind({});

Default.args = {
  label: "Property address",
  caption: "Please fill in your address",
};