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

export const SliderInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText>
        To allow users to view and select a value from the range along a bar.
        Typically used during onboarding flow for users to select their
        workplace preferences.
      </BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText>Should default to the middle value.</BodyText>
      <BodyText>
        Changes made with sliders are immediate, allowing the users to make
        slider adjustments while determining a selection. Sliders shouldn't be
        used to adjust settings with any delay in providing user feedback.
      </BodyText>
      <BodyText>
        Must include labels on the left and right sides to indicate to users
        which values they're selecting between.
      </BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>defaultValue:</u>
        </b>{" "}
        An optional <i>number</i> that specifies the starting position of the
        slider handle
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>disabled:</u>
        </b>{" "}
        An optional <i>boolean</i> that determines if the slider is disabled
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>marks:</u>
        </b>{" "}
        An optional <i>object</i> that specifies the labels at either end of the
        slider and where to show marks on slider
        - the keys of the object coordinates to the position on the slider relative to your min and max values
        - the values represent the label that will display under the key's position on the slider
        {`- example for slider below (where min = 1 and max = 5): { 1: "Tech-driven", 3: " ", 5: "Vet-driven" }`}
        - the empty space passed to the middle value creates the marker
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>max:</u>
        </b>{" "}
        An optional <i>string</i> indicating the maximum value the slider can slide to
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>min:</u>
        </b>{" "}
        An optional <i>string</i> indicating the minimum value the slider can slide to
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>step:</u>
        </b>{" "}
        An optional <i>number</i> that indicates the granularity with which the slider can step through values
        - must be greater than 0, and be divided by (max-min)
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>value:</u>
        </b>{" "}
        An optional <i>number</i> that indicates the currently selected value on the slider
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>onChange:</u>
        </b>{" "}
        An optional <i>callback function</i> that runs when the user changes the slider's value
      </BodyText>
      <br />
    </>
  );
};
