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

import { TextField } from './TextField';
const meta: Meta<typeof TextField> = {
  title: 'UI kit/Form/TextField',
  component: TextField,
  tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof TextField>;
export const Default: Story = {
  args: {
    label: 'Text:',
    value: 'Text value',
  },
};

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

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

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

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

export const Placeholder: Story = {
  args: {
    label: 'Text:',
    placeholder: 'Enter text here...',
    value: '',
  },
};

export const ReadOnly: Story = {
  args: {
    readOnly: true,
    label: 'Text:',
    value: 'Text value',
  },
};

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

export const Tooltip: Story = {
  args: {
    label: 'Text:',
    value: 'Text value',
    tooltip: 'This is a tooltip for the text field.',
  },
};

export const Warning: Story = {
  args: {
    label: 'Text:',
    value: 'Text value',
    warning: 'This is a warning for the text field.',
  },
};

export const LabelAfter: Story = {
  args: {
    label: 'Subdomain',
    value: 'fenix',
    labelAfter: '.myshoptet.com',
  },
};