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

export const ButtonInfo = () => {
  return (
    <>
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>title:</u>
        </b>{" "}
        An optional <i>string</i>; the text on the button
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>name:</u>
        </b>{" "}
        An optional <i>string</i> that specifies a name for the button (native
        html attribute)
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>type:</u>
        </b>{" "}
        An optional <i>string</i> that specifies a type for the button (native
        html attribute){" "}
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>buttonType:</u>
        </b>{" "}
        An optional <i>string</i> that indicates if the styling should reflect
        the primary button styling or secondary button styling, it defaults to
        secondary if no option is provided
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>size:</u>
        </b>{" "}
        An optional <i>string</i> that specifies the size (height, padding, and border-radius)
        of the button according to two sets of pre-set values
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>onClick:</u>
        </b>{" "}
        An optional <i>function</i> that runs on clicking the button
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>disabled:</u>
        </b>{" "}
        An optional <i>boolean</i> that indicates if the button is disabled
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>style:</u>
        </b>{" "}
        An optional <i>object</i> that specifies additional styles to be applied
        to the button
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>testId:</u>
        </b>{" "}
        An optional <i>string</i> that serves as the data-testid
      </BodyText>
      <br />
    </>
  );
};
