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

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

    An Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.
    Is commonly used in websites and web applications to organize and display content in a compact and interactive manner.

    <Subtitle>Usage</Subtitle>

    The Accordion provides the following features:

    - Multiple sections: It allows the creation of multiple sections, each consisting of a header and content. Users can toggle the visibility of each section individually.
    - Collapsible behavior: Only one section can be expanded at a time, while the others are automatically collapsed. When a section is expanded, the corresponding content is displayed, and when collapsed, the content is hidden.
    - Expand and collapse animations: The Accordion can provide smooth animations when expanding or collapsing a section, enhancing the user experience.

    <Subtitle>👍 When to use</Subtitle>

    The Accordion is useful in several scenarios:

    - Organizing content: When you have a large amount of content to display on a webpage, using an accordion can help you group related content together and make it more manageable for the users.
    - Progressive disclosure: Sometimes, you may have additional details or information that is not crucial for every user to see immediately. By using an accordion, you can hide this content by default and allow users to expand it only if needed.
    - Mobile-friendly design: Accordions provide a great user experience on mobile devices where screen space is limited. They allow users to quickly view content without scrolling through long pages.

    <Title>Properties</Title>

    <Subtitle>bq-accordion-group</Subtitle>

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

    <Subtitle>bq-accordion</Subtitle>

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