import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container">
    <Title>Alert</Title>

    The Alert is a user interface component used to convey important information to the user in a clear and concise manner. 
    It can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention.
    
    <Subtitle>Usage</Subtitle>

    - Use alerts to inform users about important events or actions such as successful login, account creation, and password reset.
    - Use alerts to inform users about errors or warnings such as incorrect login credentials, network errors, or session timeouts.
    - Use alerts to provide users with feedback about their actions such as a successful submission of a form or a message that a file has been uploaded successfully.
    - Use alerts to inform users about system status such as maintenance downtime or system upgrades.

    <Subtitle>👍 When to use</Subtitle>

    - When to communicate critical updates such as important software patches, system maintenance, or urgent changes affecting the user experience.
    - When to to provide real-time feedback on authentication status, including successful logins, failed login attempts, or session expirations.
    - When to enhance user experience by utilizing the Alert component to confirm successful data submissions or to notify users about any errors encountered during the submission process.
    - When to keep users informed about any changes in their permissions or access levels by leveraging the Alert component to deliver relevant and timely notifications.
    - When to improve user engagement and timely actions by using the Alert component to remind users of upcoming events, deadlines, or other time-sensitive tasks.

    <Title>Properties</Title>

    <ArgTypes of="bq-alert" />
  </div>
</div>
