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

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

    The Tag Component is a UI element used to label and categorize content within an application. 
    Tags are commonly used to label items with keywords or categories, making it easier to find and organize content.

    <Subtitle>Usage</Subtitle>

    - Use tags for labeling and categorizing items or content, such as tagging articles with keywords or categorizing items in a shopping cart.
    - Use tags for representing metadata about an item or content, such as the author, date, or source of an article.
    - Use tags for filtering and organizing content based on tags, such as allowing users to filter articles based on keywords or categories.
    - Use clear and concise labels for tags, avoiding complex sentences and technical jargon.

    <Subtitle>👍 When to use</Subtitle>

    - When using tags, ensure that you position them in a location that is easily visible and accessible, without obstructing important content or interactions.
    - When using tags, ensure the use of visually distinct styles and colors to differentiate between different types of tags, allowing users to easily recognize the meaning of each tag.
    - Ensure that tags are easy to interact with, allowing users to click on a tag to view related content or to remove a tag if desired.

    <Title>Properties</Title>

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