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

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

    An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.
    It can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.

    <Subtitle>Usage</Subtitle>

    It is used with the `<bq-dropdown>` component and `<bq-option-list>` component, typically to display a dropdown list.

    <Subtitle>👍 When to use</Subtitle>

    Dropdown lists of options are used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.
    They provide an efficient way to save space and present a long list of options in a compact and organized manner.
    Some of the use cases where dropdown components can be used:

    - Navigation
    - Filtering and sorting
    - Configuring settings
    - Selecting from a large list of options

    <Title>Properties</Title>

    <Subtitle>bq-option</Subtitle>

    <ArgTypes of="bq-option" />

    <Subtitle>bq-option-list</Subtitle>

    <ArgTypes of="bq-option-list" />

    <Subtitle>bq-option-group</Subtitle>

    <ArgTypes of="bq-option-group" />
  </div>
</div>
