import type { Meta, StoryObj } from '@storybook/ui'
import {
  TextInput,
  TextInputProps,
} from '../../../react/src/components/TextInput';

import { Box } from '../../../react/src/components/Box';
import { Text } from '../../../react/src/components/Text';
export default {
  title: 'Components/Text Input',
  component: TextInput,
  args: {},
  decorators: [
    (Story) => {
      return (
        <Box
          as="label"
          css={{ display: 'flex', flexDirection: 'column', gap: '$2' }}
        >
          <Text size="sm">Email address</Text>
          {Story()}
        </Box>
      )
    },
  ],
} as Meta<TextInputProps>

export const Primary: StoryObj<TextInputProps> = {
  args: {
    placeholder: 'Type your name',
  },
}

export const Disabled: StoryObj<TextInputProps> = {
  args: {
    disabled: true,
  },
}

export const WithPrefix: StoryObj<TextInputProps> = {
  args: {
    prefix: 'tsm.com/',
    placeholder: 'your-username',
  },
}