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

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

    The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information. 
    It offers a simple and efficient way to pick dates and/or time by minimizing errors and improving clarity.

    <Subtitle>Usage</Subtitle>

    - Use the Date Picker to allow users to select dates for scheduling appointments or events.
    - Use the Date Picker to enable users to choose dates for travel bookings or reservations.
    - Use the Date Picker to specify due dates or deadlines in project management tools.
    - Use the Date Picker to filter records by date range in data analysis or reporting tools.

    <Subtitle>👍 When to use</Subtitle>

    - When you need to collect precise date input, such as for booking systems, event scheduling, or project timelines.
    - When providing a calendar view can enhance the user experience and reduce errors in date selection.
    - When requiring users to select date ranges for filtering data, such as in reports or search functions.
    - When simplifying the process of entering dates, reducing the likelihood of format errors, and improving overall data integrity.
    - When offering users a convenient way to pick dates for reminders, deadlines, or other time-sensitive tasks.

    <Title>Properties</Title>

    <ArgTypes of="bq-date-picker" />
  </div>
</div>
