import { Meta } from '@storybook/react-webpack5';

import InlineAlert, { InlineAlertProps } from './InlineAlert';
import { lorem10, lorem40 } from '../test-utils';
import Link from '../link';

/**
 * > **DEPRECATED** Use [InlinePrompt](?path=/docs/prompts-inlineprompt--docs) or [Field](?path=/docs/forms-field--docs) instead.
 */
export default {
  component: InlineAlert,
  title: 'Prompts/InlineAlert',
  tags: ['deprecated'],
} as Meta<InlineAlertProps>;

export const Basic = () => {
  return (
    <>
      <p>
        Avoid using <code>InlineAlert</code> directly (unless for some custom use cases), for form
        control validation, info messaging please use <code>Field</code> component
        <pre>{'<Field sentiment={..} message={..}>'}</pre>
      </p>
      <InlineAlert type="neutral">
        You have <Link href="#">20.22 EUR</Link> available in <strong>My savings</strong>
      </InlineAlert>
      <InlineAlert type="warning">
        You have <Link href="#">20.22 EUR</Link> available in <strong>My savings</strong>
      </InlineAlert>
      <InlineAlert type="warning">{lorem10}</InlineAlert>
      <InlineAlert type="negative">{lorem10}</InlineAlert>
      <InlineAlert type="positive">{lorem40}</InlineAlert>
    </>
  );
};