import Alert from '.';

export default {
  title: 'Deprecated/Alert',

  parameters: {
    readme: {
      sidebar: '<!-- PROPS -->',
    },
  },
};

export function WithDifferentType() {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        width: '300px',
        justifyContent: 'space-between',
      }}>
      <Alert type="error">Error message</Alert>
      <Alert type="warning">Warning message</Alert>
      <Alert type="success">Success message</Alert>
      <Alert type="tip">Default tip</Alert>
    </div>
  );
}

WithDifferentType.storyName = 'with different type';

export function WithDifferentVariant() {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        width: '300px',
        justifyContent: 'space-between',
      }}>
      <Alert type="error" variant="icon">
        Error message
      </Alert>
      <Alert type="warning" variant="border">
        Warning message
      </Alert>
    </div>
  );
}

WithDifferentVariant.storyName = 'with different variant';

export function WithIcon() {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        width: '300px',
        justifyContent: 'space-between',
      }}>
      <Alert type="error" showIcon>
        Error message
      </Alert>
      <Alert type="warning" showIcon>
        Warning message
      </Alert>
      <Alert type="success" showIcon>
        Success message
      </Alert>
      <Alert type="tip" showIcon>
        Default tip
      </Alert>
    </div>
  );
}

WithIcon.storyName = 'with icon';

export function WithDifferentMessage() {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        width: '300px',
        justifyContent: 'space-between',
      }}>
      <Alert type="error">Error message</Alert>
      <Alert type="error">
        <ul>
          <li>Error message 1</li>
          <li>Error message 2</li>
        </ul>
      </Alert>
    </div>
  );
}

WithDifferentMessage.storyName = 'with different message';
