import React from "react";
import { HeaderText, BodyText } from "../InfoStyles";

export const DatePickerInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText></BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText></BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>picker:</u>
        </b>{" "}
        A required <i>[string]</i> that indicates which type of date picker
        to display - can be one of four values: "date" | "month" | "quarter" |
        "year"
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>value:</u>
        </b>{" "}
        An optional <i>Dayjs value</i> representing the date selected by the
        date picker
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>placeholder:</u>
        </b>{" "}
        An optional <i>string</i> that serves as placeholder text if there's no
        defaultValue assigned
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>className:</u>
        </b>{" "}
        An optional <i>string</i> if an additional className needs to be passed
        to the date picker
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>disabled:</u>
        </b>{" "}
        An optional <i>boolean</i> indicating if the date picker is disabled
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>disabledDate:</u>
        </b>{" "}
        An optional <i>Dayjs value</i> that indicates disabled dates on the date
        picker
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>open:</u>
        </b>{" "}
        An optional <i>boolean</i> that indicates whether or not the date picker
        popup is open
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>defaultValue:</u>
        </b>{" "}
        An optional <i>Dayjs value</i> representing the initial date selected on
        the date picker
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>showToday:</u>
        </b>{" "}
        An optional <i>boolean</i> that indicates whether or not an indicator is
        shown around today's date
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>onChange:</u>
        </b>{" "}
        An optional <i>function</i> that runs when a new selection is made
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>isShowArrows:</u>
        </b>{" "}
        An optional <i>boolean</i> that defaults to true, and determines whether
        there are arrows on either side of the date picker that
        increase/decrease the date by the appropriate time period
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>labelText:</u>
        </b>{" "}
        An optional <i>string</i> that serves as the label text above the input
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>labelSize:</u>
        </b>{" "}
        An optional <i>string</i> that determines the label text size and style
        - options include "small" and "large", defaults to large
      </BodyText>
      <br />
      <HeaderText>Other</HeaderText>
      <BodyText>
        - additional props can be found in the index.js (that are set by
        default), and less commonly used props can be found at{" "}
        <a>https://ant.design/components/date-picker</a>{" "}
      </BodyText>
    </>
  );
};
