import { Typography } from '../common/propsValues/typography';
import Title from '../title';

import Body from './Body';

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

export const Basic = () => {
  return (
    <>
      <div>
        <Title type={Typography.TITLE_SUBSECTION}>Body Large Bold</Title>
        <Body as="p" type={Typography.BODY_LARGE_BOLD}>
          We’re building the world’s most <strong>international account</strong>. We’re building the
          world’s most <b>international account</b>.
        </Body>
        <Body as="p" type={Typography.BODY_LARGE_BOLD} preserveNewlines>
          {'This is line one.\nThis is line two.'}
        </Body>
        <Body as="p" type={Typography.BODY_LARGE_BOLD}>
          Ми будуємо найбільш <strong>міжнародний рахунок у світі</strong>. Ми будуємо найбільш{' '}
          <b>міжнародний рахунок у світі</b>.
        </Body>
        <Body as="p" type={Typography.BODY_LARGE_BOLD}>
          私たちは世界で最も国際的なアカウン<strong>トを構築しています</strong>{' '}
          私たちは世界で最も国際的なアカウン<b>トを構築しています</b>
        </Body>
        <Body as="p" type={Typography.BODY_LARGE_BOLD}>
          Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
          internationalen <b>Bericht der Welt auf</b>.
        </Body>
        <Body as="p" type={Typography.BODY_LARGE_BOLD}>
          ↑ ↓ {'<-'} {'->'}
        </Body>
      </div>
      <div>
        <Title type={Typography.TITLE_SUBSECTION}>Body Default</Title>
        <Body as="p" type={Typography.BODY_DEFAULT}>
          We’re building the world’s most <strong>international account</strong>. We’re building the
          world’s most <b>international account</b>.
        </Body>
        <Body as="p" preserveNewlines>
          {'This is line one.\nThis is line two.'}
        </Body>
        <Body as="p" type={Typography.BODY_DEFAULT}>
          Ми будуємо найбільш <strong>міжнародний рахунок у світі</strong>. Ми будуємо найбільш{' '}
          <b>міжнародний рахунок у світі</b>.
        </Body>
        <Body as="p" type={Typography.BODY_DEFAULT}>
          私たちは世界で最も国際的なアカウン<strong>トを構築しています</strong>{' '}
          私たちは世界で最も国際的なアカウン<b>トを構築しています</b>
        </Body>
        <Body as="p" type={Typography.BODY_DEFAULT}>
          Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
          internationalen <b>Bericht der Welt auf</b>.
        </Body>
        <Body as="p" type={Typography.BODY_DEFAULT}>
          ↑ ↓ {'<-'} {'->'}
        </Body>
      </div>
      <div>
        <Title type={Typography.TITLE_SUBSECTION}>Body Default Bold</Title>
        <Body as="p" type={Typography.BODY_DEFAULT_BOLD}>
          We’re building the world’s most <strong>international account</strong>. We’re building the
          world’s most <b>international account</b>.
        </Body>
        <Body as="p" type={Typography.BODY_DEFAULT_BOLD} preserveNewlines>
          {'This is line one.\nThis is line two.'}
        </Body>
        <Body as="p" type={Typography.BODY_DEFAULT_BOLD}>
          Ми будуємо найбільш <strong>міжнародний рахунок у світі</strong>. Ми будуємо найбільш{' '}
          <b>міжнародний рахунок у світі</b>.
        </Body>
        <Body as="p" type={Typography.BODY_DEFAULT_BOLD}>
          私たちは世界で最も国際的なアカウン<strong>トを構築しています</strong>{' '}
          私たちは世界で最も国際的なアカウン<b>トを構築しています</b>
        </Body>
        <Body as="p" type={Typography.BODY_DEFAULT_BOLD}>
          Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
          internationalen <b>Bericht der Welt auf</b>.
        </Body>
        <Body as="p" type={Typography.BODY_DEFAULT_BOLD}>
          ↑ ↓ {'<-'} {'->'}
        </Body>
      </div>
      <div>
        <Title type={Typography.TITLE_SUBSECTION}>Body Large</Title>
        <Body as="p" type={Typography.BODY_LARGE}>
          We’re building the world’s most <strong>international account</strong>. We’re building the
          world’s most <b>international account</b>.
        </Body>
        <Body as="p" type={Typography.BODY_LARGE} preserveNewlines>
          {'This is line one.\nThis is line two.'}
        </Body>
        <Body as="p" type={Typography.BODY_LARGE}>
          Ми будуємо найбільш <strong>міжнародний рахунок у світі</strong>. Ми будуємо найбільш{' '}
          <b>міжнародний рахунок у світі</b>.
        </Body>
        <Body as="p" type={Typography.BODY_LARGE}>
          私たちは世界で最も国際的なアカウン<strong>トを構築しています</strong>{' '}
          私たちは世界で最も国際的なアカウン<b>トを構築しています</b>
        </Body>
        <Body as="p" type={Typography.BODY_LARGE}>
          Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
          internationalen <b>Bericht der Welt auf</b>.
        </Body>
        <Body as="p" type={Typography.BODY_LARGE}>
          ↑ ↓ {'<-'} {'->'}
        </Body>
      </div>
      <Title type={Typography.TITLE_SUBSECTION}>
        Copy Example without <code>{'<Body />'}</code> component
      </Title>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus
        accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus,
        modi possimus soluta. Et iusto odio autem debitis! ↑ ↓ {'<-'} {'->'}
      </p>
      <Title type={Typography.TITLE_SUBSECTION}>Copy Example without any HTML tag</Title>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus
      accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus,
      modi possimus soluta. Et iusto odio autem debitis! ↑ ↓ {'<-'} {'->'}
    </>
  );
};
