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

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

    The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.
    This component is useful for displaying user profile pictures or any other image that represents a person or an entity.

    <Subtitle>Usage</Subtitle>

    Here are some best practices to ensure a positive user experience with the Avatar component:

    - **Make it identifiable:** The avatar should be easily recognizable and should represent the user or entity accurately. It should be appropriate and relevant to the context in which it is used.
    - **Keep it simple:** The size and complexity of the avatar should be appropriate to the context in which it is used. A simple, clear design is usually better than a complex one that can be difficult to understand.
    - **Ensure consistency:** Use the same avatar across all instances of the user or entity to ensure consistency and familiarity.
    - **Provide alternative text:** Always provide alternative text for the avatar for users who cannot see the image. This can be achieved by using the `alt` attribute.

    <Subtitle>👍 When to use</Subtitle>

    The Avatar component is commonly used in the following scenarios:

    - **Profile pictures:** The Avatar is commonly used to display a user's profile picture.
    - **Comment sections:** The Avatar is also commonly used in comment sections to display the picture of the user who made the comment.
    - **List views:** The Avatar can also be used in list views to provide a visual representation of the user or entity associated with an item in the list.

    <Title>Properties</Title>

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