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

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

    The Search component is a crucial element in user interfaces that facilitates quick and efficient information retrieval.
    It enables users to enter keywords or phrases, filtering through vast amounts of data to locate specific content or relevant results.

    <Subtitle>Usage</Subtitle>

    - Do use the Search component prominently and easily accessible, ensuring it aligns with the user's search intent.
    - Do provide a clear and concise label for the Search input field, indicating the type of data users should enter.
    - Do provide autocomplete functionality to assist users in narrowing down their search terms and enhancing accuracy.
    - Do consider progressive disclosure, gradually revealing more search options or filters as the user refines their search criteria.
    - Do utilize search prediction algorithms to suggest relevant search terms based on user input, saving time and effort.
    - Do provide real-time search to provide immediate feedback as users type, demonstrating the search engine's efficiency.
    - Do visually highlight matching search terms within the retrieved results, improving readability and highlighting relevant content.
    - Do allow users to sort search results based on various criteria, such as relevance, date, or popularity, enhancing the user experience.

    <Subtitle>👍 When to use</Subtitle>

    The Search component should be used when you need to search user input, such as:

    - Content Indexing: Implement the Search component in applications with vast amounts of content to facilitate quick and efficient navigation.
    - Product Search: Provide a Search feature in eCommerce platforms to help users locate specific products or categories.
    - Knowledge Base Retrieval: Incorporate Search into knowledge bases to enable users to quickly find relevant information and documentation.
    - Support Ticket Resolution: Integrate Search in support systems to assist users in finding answers to frequently asked questions (FAQs) and resolving common issues.
    - Customizable Search: Allow users to customize their search experience by defining filters, sorting options, and advanced search parameters.
    - Accessibility Considerations: Ensure the Search component is accessible to users with disabilities, incorporating appropriate labels, alternative text, and screen reader compatibility.

    <Title>Properties</Title>

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