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

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

    The Switch component is a UI element that provides a switch-like interface to toggle a specific setting or option.
    It consists of a button or a switch that can be turned on or off, depending on the user's preference.

    <Subtitle>Usage</Subtitle>

    Here are some best practices to follow when using the Switch component:

    - Use the Switch component when you want to allow users to turn a setting or option on or off quickly and easily.
    - Use clear and descriptive labels that accurately describe the function of the Switch component.
    - Always provide visual feedback when the Switch component is switched on or off.
    - Use Switch components only for simple on/off settings. If you have more complex settings, use a different interface element such as a checkbox or dropdown menu.

    <Subtitle>👍 When to use</Subtitle>

    The Switch component is ideal for use in the following scenarios:

    - When the user needs to turn a setting on or off quickly and easily.
    - When the setting is simple and requires only two options.
    - When the setting is frequently toggled on and off.

    <Title>Properties</Title>

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