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

const meta: Meta<typeof ErrorMessage> = {
  title: 'Form/ErrorMessage',
  component: ErrorMessage,
  parameters: {
    docs: {
      description: {
        component:
          'A component for displaying error messages to users in a consistent and accessible way.',
      },
    },
  },
  argTypes: {
    children: {
      control: 'text',
      defaultValue: 'Error Message',
      description: 'The error message content.',
    },
    className: {
      control: 'text',
      defaultValue: '',
      description: 'Additional CSS classes for the error message.',
    },
  },
}

export default meta
type Story = StoryObj<typeof ErrorMessage>

export const Default: Story = {
  args: {
    children: 'This field is required',
  },
}

export const LongErrorMessage: Story = {
  args: {
    children:
      'This is a longer error message that provides more detailed information about what went wrong and how to fix it.',
  },
}

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