import type { Meta, StoryObj } from '@storybook/react'
import { Helper } from './index'

const meta: Meta<typeof Helper> = {
  title: 'Form/Helper',
  component: Helper,
  parameters: {
    docs: {
      description: {
        component:
          'A component for displaying helpful text that provides additional context or guidance to users.',
      },
    },
  },
  argTypes: {
    children: {
      control: 'text',
      defaultValue: 'Helper Text',
      description: 'The text content of the Helper.',
    },
    className: {
      control: 'text',
      defaultValue: '',
      description: 'Additional CSS classes for the helper text.',
    },
    size: {
      control: { type: 'select' },
      options: ['default', 'sm'],
      description: 'The size of the helper text.',
    },
  },
}

export default meta
type Story = StoryObj<typeof Helper>

export const Default: Story = {
  args: {
    children: 'Default Helper',
  },
}

export const SM: Story = {
  args: {
    children: 'SM Helper',
    size: 'sm',
  },
}

export const WithLongText: Story = {
  args: {
    children:
      'This is a longer helper text that provides more detailed information about the form field or action. It can span multiple lines and give users comprehensive guidance.',
  },
}

export const WithLinks: Story = {
  render: function Render(_args) {
    return (
      <Helper>
        This helper text contains a{' '}
        <a href="#" className="text-link hover:underline">
          link
        </a>{' '}
        for additional information.
      </Helper>
    )
  },
}