import type { Meta, StoryObj } from '@storybook/react-vite';

import { NumberField } from './NumberField';

const meta: Meta<typeof NumberField> = {
  title: 'UI kit/Form/NumberField',
  component: NumberField,
  tags: ['autodocs'],
  argTypes: {
    value: { control: 'number' },
    defaultValue: { control: 'number' },
    min: { control: 'number' },
    max: { control: 'number' },
    step: { control: 'number' },
  },
};

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

export const Default: Story = {
  args: {
    label: 'Number:',
  },
};

export const Disabled: Story = {
  args: {
    label: 'Number:',
    disabled: true,
  },
};

export const Loading: Story = {
  args: {
    label: 'Number:',
    loading: true,
  },
};

export const Hint: Story = {
  args: {
    label: 'Number:',
    hint: 'This is a hint for the number field.',
  },
};

export const Justify: Story = {
  args: {
    label: 'Number:',
    justify: true,
  },
};

export const LabelAfter: Story = {
  args: {
    label: 'Text length:',
    labelAfter: 'characters',
  },
};

export const Placeholder: Story = {
  args: {
    label: 'Number:',
    placeholder: 'Enter a number',
  },
};

export const Required: Story = {
  args: {
    label: 'Number:',
    required: true,
  },
};

export const Tooltip: Story = {
  args: {
    label: 'Number:',
    tooltip: 'This field accepts numeric input only.',
  },
};