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

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

    The Breadcrumb Component helps users understand their current location within a website or application's hierarchical structure.
    It is a list of links or buttons that provides context and helps users understand where they are within the overall information architecture and provides a sense of orientation and control.
    Each item in the Breadcrumb Component represents a level in the hierarchy of the application.

    <Subtitle>Usage</Subtitle>

    - Provide context: Breadcrumbs give users an overview of the page hierarchy they're currently in, providing them with a sense of context and helping them understand where they are in relation to the rest of the site.
    - Improve navigation: Breadcrumbs make it easier for users to move up and down the page hierarchy, quickly returning to previously visited pages or exploring new sections of the site.
    - Enhance discoverability: By highlighting the path to the current page, breadcrumbs can also help users discover new content and features within the site.

    <Subtitle>👍 When to use</Subtitle>

    Do's:

    - Use clear and concise labels for each breadcrumb, describing the content of the page or section it represents.
    - Make sure the breadcrumb labels accurately reflect the page hierarchy, with the most general sections at the beginning and the most specific sections at the end.
    - Keep breadcrumbs visible and accessible, either by placing them at the top of the page or by having them fixed to the top of the screen as the user scrolls.
    - Make breadcrumbs clickable, allowing users to easily navigate back to previously visited pages.

    Don'ts:

    - Overuse breadcrumbs, or use them in situations where they don't provide any meaningful context or benefit to the user.
    - Use breadcrumbs as a substitute for proper navigation, as they should complement, not replace, other navigation elements such as menus and links.
    - Make breadcrumbs too small or hard to read, as this can make it difficult for users to understand the context and navigate the site effectively.
    - Use breadcrumbs as a way to display too much information, as this can make the navigation overwhelming and confusing for users.

    <Title>Properties</Title>

    <Subtitle>bq-readcrumb</Subtitle>

    <ArgTypes of="bq-breadcrumb" />

    <Subtitle>bq-readcrumb-item</Subtitle>

    <ArgTypes of="bq-breadcrumb-item" />
  </div>
</div>
