/* eslint-disable react/jsx-child-element-spacing */
import Body from '../body/Body';
import { Typography } from '../common';
import Title from '../title/Title';

import Link from '.';

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

export const Basic = () => {
  return (
    <>
      <Title type={Typography.TITLE_SCREEN} className="m-t-3">
        Standalone examples of links
      </Title>
      <Link href="#" target="_blank">
        Default link
      </Link>
      <Link type={Typography.LINK_DEFAULT} target="_blank" className="m-t-3" href="#">
        Default link
      </Link>
      <Link type={Typography.LINK_LARGE} target="_blank" className="m-t-3" href="#">
        Large link
      </Link>
      <Title type={Typography.TITLE_SCREEN} className="m-t-3">
        Links via <code>{'<Link />'}</code> component in all types of body copy
      </Title>
      <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
        We’re building the world’s{' '}
        <Link href="#" target="_blank">
          most international account
        </Link>
        . We’re building the world’s most international account
      </Body>
      <Body type={Typography.BODY_LARGE} className="m-t-3">
        We’re building the world’s{' '}
        <Link href="#" target="_blank">
          most international account
        </Link>
        . We’re building the world’s most international account
      </Body>
      <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
        We’re building the world’s{' '}
        <Link href="#" target="_blank">
          most international account
        </Link>
        . We’re building the world’s most international account
      </Body>
      <Body type={Typography.BODY_DEFAULT} className="m-t-3">
        We’re building the world’s{' '}
        <Link href="#" target="_blank">
          most international account
        </Link>
        . We’re building the world’s most international account
      </Body>

      <Title type={Typography.TITLE_SCREEN} className="m-t-3">
        Links via <code>{'<a>'}</code> tag in all types of body copy
      </Title>
      <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
        We’re building the world’s{' '}
        <a href="#" target="_blank">
          most international account
        </a>
        . We’re building the world’s most international account
      </Body>
      <Body type={Typography.BODY_LARGE} className="m-t-3">
        We’re building the world’s{' '}
        <a href="#" target="_blank">
          most international account
        </a>
        . We’re building the world’s most international account
      </Body>
      <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
        We’re building the world’s{' '}
        <a href="#" target="_blank">
          most international account
        </a>
        . We’re building the world’s most international account
      </Body>
      <Body type={Typography.BODY_DEFAULT} className="m-t-3">
        We’re building the world’s{' '}
        <a href="#" target="_blank">
          most international account
        </a>
        . We’re building the world’s most international account
      </Body>
    </>
  );
};
