import React from "react";
import {
  Display1,
  Display2,
  Display3,
  Display4,
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
  Label1,
  Label2,
  Label3,
  Label4,
  Paragraph1,
  Paragraph2,
  Paragraph3,
  Paragraph4,
} from "baseui/typography";

const textString = "Insights in your real estate data. Knowledge is power.";
const bodyString =
  "The AXIOM data sharing platform was developed by Deloitte and gives owners control over the distribution of rental data, square meters and energy labels, and offers the option of data verification. This gives banks a faster insight into financing options and the status of financed real estate. And digital exchange with appraisers leads to efficient and high-quality valuations. With AXIOM to complement KATE’s existing technology, the next step is taken in the digital future of the real estate sector.";

export interface TypographyProps {}

/**
 * This is a helper for typography components<br />
 */
const Typography: React.FC<TypographyProps> = () => {
  return (
    <>
      <Display1 marginBottom="scale500">{textString}</Display1>
      <Display2 marginBottom="scale500">{textString}</Display2>
      <Display3 marginBottom="scale500">{textString}</Display3>
      <Display4>{textString}</Display4>
      <H1>{textString}</H1>
      <H2>{textString}</H2>
      <H3>{textString}</H3>
      <H4>{textString}</H4>
      <H5>{textString}</H5>
      <H6>{textString}</H6>
      <Label1>{textString}</Label1>
      <Paragraph1>{bodyString}</Paragraph1>
      <Label2>{textString}</Label2>
      <Paragraph2>{bodyString}</Paragraph2>
      <Label3>{textString}</Label3>
      <Paragraph3>{bodyString}</Paragraph3>
      <Label4>{textString}</Label4>
      <Paragraph4>{bodyString}</Paragraph4>
    </>
  );
};

export default Typography;