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

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container" >
    <Title>Tabs or Tab Group</Title>

    The Tabs component is a user interface (UI) element that you can use to display content in multiple sections, allowing only one section to be visible at a time.
    Tabs are typically placed in a horizontal bar that displays clickable buttons with labels for each section.
    Tabs provide a clean and organized display of content, making it easier for users to navigate and understand the information presented.

    <Subtitle>Usage</Subtitle>

    - Use a clear and consistent visual hierarchy to indicate which sections are most important or relevant to the user.
    - Consider using icons or images in addition to text labels to make the purpose of each section more clear and visually appealing.
    - Ensure that the tab bar is visible and easily accessible at all times, even when the user scrolls through the page or interface.
    - Consider providing a default tab selection to avoid confusion for users who may not know which section to select first.
    - Avoid using too many colors or visual effects, as this can distract from the content and make the interface appear cluttered or overwhelming.
    - Consider using animations or transitions to provide visual feedback when the user selects a new tab or section.
    - Test the Tabs component with real users to ensure that it is intuitive and meets their needs and expectations.

    <Subtitle>👍 When to use</Subtitle>

    - Use the Tabs component when you have a large amount of content that can be divided into distinct, related sections.
    - Use the Tabs component when you want to simplify the navigation of a complex interface, by dividing it into smaller, more manageable sections.

    <Title>Properties</Title>

    <Subtitle>bq-tab-group</Subtitle>

    <ArgTypes of="bq-tab-group" />

    <Subtitle>bq-tab</Subtitle>

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