import { H1 } from 'reablocks';
import { H2 } from 'reablocks';
import { H3 } from 'reablocks';
import { H4 } from 'reablocks';
import { H5 } from 'reablocks';
import { H6 } from 'reablocks';
import { P } from 'reablocks';
import { BlockQuote } from 'reablocks';
import { Lead } from 'reablocks';
import { Large } from 'reablocks';
import { Small } from 'reablocks';
import { Muted } from 'reablocks';

export default {
  title: 'Components/Typography/Typography',
  component: H1
};

export const Headings = () => (
  <div className="flex flex-col gap-4">
    <H1>This is an H1 Heading</H1>
    <H2>This is an H2 Heading</H2>
    <H3>This is an H3 Heading</H3>
    <H4>This is an H4 Heading</H4>
    <H5>This is an H5 Heading</H5>
    <H6>This is an H6 Heading</H6>
  </div>
);

export const Paragraph = () => (
  <div>
    <P>
      The king, seeing how much happier his subjects were, realized the error of
      his ways and repealed the joke tax.
    </P>
    <P>
      The people of the kingdom once again could freely exchange jokes and
      laughter, and the land was filled with joy and mirth.
    </P>
  </div>
);

export const BlockQuoteExample = () => (
  <BlockQuote>
    "After all," he said, "everyone enjoys a good joke, so it's only fair that
    they should pay for the privilege."
  </BlockQuote>
);

export const LeadText = () => (
  <Lead>
    A modal dialog that interrupts the user with important content and expects a
    response.
  </Lead>
);

export const LargeText = () => <Large>Are you absolutely sure?</Large>;

export const SmallText = () => <Small>Email address</Small>;

export const MutedText = () => <Muted>Enter your email address.</Muted>;

export const All = () => (
  <div className="max-w-2xl">
    <H1>The Joke Tax Chronicles</H1>
    <Lead>
      Once upon a time, in a far-off land, there was a very lazy king who spent
      all day lounging on his throne.
    </Lead>
    <H2>The People of the Kingdom</H2>
    <P>
      The king, seeing how much happier his subjects were, realized the error of
      his ways and repealed the joke tax.
    </P>
    <BlockQuote>
      "After all," he said, "everyone enjoys a good joke, so it's only fair that
      they should pay for the privilege."
    </BlockQuote>
    <H3>The Joke Tax</H3>
    <P>
      The king's subjects were not amused. They grumbled and groaned, but the
      king was firm in his decision. Anyone caught telling a joke without paying
      the tax would be thrown into the dungeon.
    </P>
    <H4>People stopped telling jokes</H4>
    <H5>A smaller subsection heading</H5>
    <H6>The smallest heading level</H6>
    <P>
      The people of the kingdom realized that the joke tax was not just unfair,
      but it was also very poorly thought out. After all, what constitutes a
      joke?
    </P>
    <Large>Are you absolutely sure?</Large>
    <P>
      This action cannot be undone. This will permanently delete your account
      and remove your data from our servers.
    </P>
    <Small>Email address</Small>
    <Muted>Enter your email address.</Muted>
  </div>
);