import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { Input } from "./input";
import { fn } from "storybook/test";

/** Reusable Input Component */
const meta: Meta<typeof Input> = {
  title: "Shadcn UI/Input",
  component: Input,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  args: {
    disabled: false,
    placeholder: "Placeholder",
    onChange: fn(),
    onFocus: fn(),
    onBlur: fn(),
  },
  argTypes: {
    type: {
      control: { type: "select" },
      options: ["text", "email", "password", "number"],
    },
    disabled: {
      control: { type: "boolean" },
    },
    placeholder: {
      control: { type: "text" },
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {} satisfies Story;

export const WithValue = {
  args: {
    defaultValue: "Value",
  },
} satisfies Story;

export const Email = {
  args: {
    type: "email",
    placeholder: "example@email.com",
  },
} satisfies Story;

export const Password = {
  args: {
    type: "password",
    placeholder: "Password",
  },
} satisfies Story;

export const Number = {
  args: {
    type: "number",
    placeholder: "Number",
  },
} satisfies Story;

export const Disabled = {
  args: {
    placeholder: "Disabled",
    disabled: true,
  },
} satisfies Story;

export const WithError = {
  args: {
    placeholder: "With Error",
    "aria-invalid": true,
  },
} satisfies Story;
