import { Meta, Title, Subtitle, HeaderMdx } from '@storybook/addon-docs';
import { Text } from '@lendi/ui/Typography';
import BodyDo from './img/Body_Do.png';
import BodyDont from './img/Body_Dont.png';
import SubtitlesDo from './img/Subtitles_Do.png';
import SubtitlesDont from './img/Subtitles_Dont.png';
import TextlinkDo from './img/Textlink_Do.png';
import TextlinkDont from './img/Textlink_Dont.png';
import TitleDo from './img/Title_Do.png';
import TitleDont from './img/Title_Dont.png';
import TitleBox from './img/TitleBox.png';
import TitleNumbers from './img/Title_HighlightNumbers.png';
import LUIDo from './img/LUIComponent_Do.png';
import LUIDont from './img/LUIComponent_Dont.png';
import {TITLE_COMPONENTS_DECOMISSIONED, TITLE_FOUNDATIONS, TITLE_TYPOGRAPHY, TITLE_GUIDELINE} from "../../../../../docs/content";

<Meta title={`${TITLE_COMPONENTS_DECOMISSIONED}/${TITLE_TYPOGRAPHY}/${TITLE_GUIDELINE}`} />

<Title>{TITLE_TYPOGRAPHY}</Title>
<Subtitle>Design Guidelines</Subtitle>

## Titles
<HalfColumns marginBottom="30px">
  <div>
    <p>Titles are the largest text hierarchy on the screen.</p>
    <p>In the marketing space, the largest text hierarchy is 'Display'. These titles are used in hero components and to introduce different sections.</p>
    <p>In the funnel experience, the largest text hierarchy is 'Title 1'. These titles are used to introduce a page, sections of a page or for numerics.</p>
  </div>
  <ImgBlock imgSrc={TitleBox} alt="title use" />
</HalfColumns>


### Keep titles succint and break it up when necessary
<HalfColumns marginBottom="50px">
  <DoDont variant="do" caption="Break up your content into two title styles to make it more engaging." imgSrc={TitleDo} />
  <DoDont variant="dont" caption="Do not have large titles." imgSrc={TitleDont} />
</HalfColumns>

<HalfColumns marginBottom="50px">
  <div>
    <HeaderMdx as="h3" id="use-titles-to-highlight-numbers">Use titles to highlight numbers</HeaderMdx>
    <p>A label is used to tell the user what action the button does.</p>
  </div>
  <ImgBlock imgSrc={TitleNumbers} alt={'numbers with subtitles'} padding="30px" />
</HalfColumns>


## Subtitles
Subtitles are smaller than titles. They are typically used to introduce a body of text, and/or break up the body into sections.

Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.

### Use subtitles to break up bodies of text
This makes it easier to navigate through large bodies of text, which makes it more engaging to read.
<HalfColumns>
  <DoDont variant="do" size="lg" caption="Do use every opportunity to break up large blocks of text." imgSrc={SubtitlesDo} />
  <DoDont variant="dont" size="lg" caption="Try to avoid using large blocks of text. Break it up with subtitles to make it easier to consume and navigate." imgSrc={SubtitlesDont} />
</HalfColumns>


## Body
Body is primarily used to deliver blocks of text. It ranges in two sizes.
<HalfColumns>
  <DoDont variant="do" caption="Do use the provided text style for body text." imgSrc={BodyDo} />
  <DoDont variant="dont" caption="Do not use title and subtitle text style for body text." imgSrc={BodyDont} />
</HalfColumns>


## Text links
The text link will match whatever text style is being used. To indicate that it is a text link, use blue 600. On hover, the link should be underlined. This is to not be confused with text button.
<HalfColumns>
  <DoDont variant="do" caption="Do use text links in body text." imgSrc={TextlinkDo} />
  <DoDont variant="dont" caption="Try to avoid using text links in headings and subtitles." imgSrc={TextlinkDont} />
</HalfColumns>


## LUI components
### Use subtitles and body text in LUI components

<HalfColumns>
  <DoDont variant="do" caption="Do use subtitle and body text in a LUI component" imgSrc={LUIDo} />
  <DoDont variant="dont" caption="Do not use titles in a LUI component." imgSrc={LUIDont} />
</HalfColumns>