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

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

    An Empty State is a UI component that is displayed when a user interacts with an application or system and there 
    is no data or content available to display. Empty States are common in applications that have dynamic or changing data, 
    or when the user is in a state of no activity or interaction.
    
    <Subtitle>Usage</Subtitle>

    - Use clear and concise language to explain the context of the empty state, so that users can understand the reason why there is no data or content available.
    - Use visually appealing and positive design elements, such as illustrations, icons, or images, to keep users engaged and reduce frustration.
    - Consider the use of humor or lightheartedness, if appropriate, to maintain a positive and inviting experience for users.
    - Provide a clear and concise call-to-action that helps users navigate to other parts of the application or system, where they can find the data or content they need.
    - Test the empty state with real users to ensure that it is effective in communicating the message and providing the guidance needed.

    <Subtitle>👍 When to use</Subtitle>

    - When to display a helpful message or guidance to users when there is no data or content available.
    - When to provide a clear and concise way to inform users that there is no data or content available, so that they can understand the context and meaning of the empty state.
    - When to provide an inviting and positive visual experience, to maintain user engagement and reduce frustration.
    - When to include a call-to-action (CTA) that helps users navigate to other parts of the application or system, where they can find the data or content they need.

    <Title>Properties</Title>

    <ArgTypes of="bq-empty-state" />
  </div>
</div>
