import type { ComponentProps } from "react";
import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { InputText } from "@jobber/components-native";
import { InputTextBasic, InputTextInvalid, InputTextToolbar } from "./docs";

const meta = {
  title: "Components/Forms and Inputs/InputText",
  component: InputText,
  parameters: {
    viewport: { defaultViewport: "mobile1" },
    showNativeOnWebDisclaimer: true,
  },
} satisfies Meta<typeof InputText>;
export default meta;
type Story = StoryObj<Partial<ComponentProps<typeof InputText>>>;

export const Basic: Story = {
  render: InputTextBasic,
  args: {
    name: "age",
    placeholder: "Age in words",
  },
};

export const Invalid: Story = {
  render: InputTextInvalid,
  args: {
    placeholder: "What is your favorite fruit?",
    defaultValue: "Tomato",
    invalid: "That's not a fruit",
  },
};

export const Toolbar: Story = {
  render: InputTextToolbar,
  args: {
    placeholder: "Write your message",
  },
};