import {
  Canvas,
  Controls,
  Meta,
  Title,
  Subtitle,
} from '@storybook/addon-docs/blocks'
import * as ErrorMessageStories from './ErrorMessage.stories'
import { LifecycleTag } from '../../docs/components'

<Meta of={ErrorMessageStories} />

<Title>ErrorMessage</Title>
<Subtitle>
  A component for displaying error messages to users in a consistent and
  accessible way.
</Subtitle>
<LifecycleTag variant="Stable" />

<Canvas of={ErrorMessageStories.Default} sourceState="shown" />
<Controls />

## Usage

The ErrorMessage component is used to display validation errors, system errors, or any error-related information to users. It provides clear visual feedback and follows accessibility guidelines.

#### Import

```tsx
import { ErrorMessage } from '@chainlink/blocks'
```

#### Import

```tsx
function MyForm() {
  const [error, setError] = useState('')

  return (
    <div>
      <input type="email" />
      {error && <ErrorMessage>{error}</ErrorMessage>}
    </div>
  )
}
```

## Examples

<Canvas of={ErrorMessageStories.LongErrorMessage} sourceState="shown" />

<Canvas of={ErrorMessageStories.WithLinks} sourceState="shown" />