import React from 'react';

export default {
  title: 'Base styles/Typography',
  args: {
    h1Text: 'Heading 1',
    h2Text: 'Heading 2',
    h3Text: 'Heading 3',
    h4Text: 'Heading 4',
    bodyText: 'Body text',
    metaText: 'Meta text',
    linkText: 'Link text',
  },
};

interface Args {
  h1Text: string;
  h2Text: string;
  h3Text: string;
  h4Text: string;
  bodyText: string;
  metaText: string;
  linkText: string;
}

export const Typography = ({
  h1Text,
  h2Text,
  h3Text,
  h4Text,
  bodyText,
  metaText,
  linkText,
}: Args) => (
  <>
    <h1>{h1Text}</h1>
    <h2>{h2Text}</h2>
    <h3>{h3Text}</h3>
    <h4>{h4Text}</h4>
    <p>{bodyText}</p>
    <p className="meta">{metaText}</p>
    <a href="http://gathercontent.com">{linkText}</a>
  </>
);
