import React from "react";
import { Meta, StoryFn } from "@storybook/react";
import { Input } from "./Input";

export default {
  title: "Atoms/Input",
  component: Input,
  decorators: [
    (Story) => (
      <div className="max-w-[500px]">
        <Story />
      </div>
    ),
  ],
} as Meta;

const Template: StoryFn = (args) => <Input {...args} />;

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

Default.args = {
  id: "name",
  placeholder: "name",
};

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

WithLabel.args = {
  id: "name",
  label: "name",
};

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

RequiredWithLabel.args = {
  id: "name",
  label: "name",
  required: true,
};

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

WithLabelAndPrefix.args = {
  id: "name",
  label: "name",
  prefix: "https://twitter.com/",
  required: true,
};

