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

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,
  prefixChildren: (
    <span className="border-r border-input py-2 pr-2 px-3 text-gray-600">
      <HeartIcon />
    </span>
  ),
  suffixChildren: (
    <span className="border-r border-input py-2 pr-2 px-3 text-gray-600">
      <HeartIcon />
    </span>
  ),
};

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

WithError.args = {
  id: "name",
  label: "name",
  prefix: "https://twitter.com/",
  isError: true,
  errorMessage: "This is an error message",
};
