import * as React from 'react';
import TextLink, { AnchorTextLink } from '.';
import Text from '../Text/Text';
import { Box, Stack } from '../Layout/index';

export default {
  title: 'Components|TextLink',
  component: TextLink,
};

export const index = () => (
  <Box p="small" bg="Light Neutral 3">
    <Stack>
      <Text>
        Lorem ipsum dolor sit amet, <AnchorTextLink href="#">textlink</AnchorTextLink> consectetur
      adipisicing elit. Excepturi, facere nihil magni repellat neque labore,{' '}
        <AnchorTextLink href="#" monochrome>
          monochrome textlink
      </AnchorTextLink>{' '}
      voluptatibus enim explicabo consectetur architecto exercitationem corrupti?{' '}
        <Text fontWeight="bold">
          Doloribus rerum <AnchorTextLink href="#">textlink</AnchorTextLink> voluptatibus repellat,
        quam officia{' '}
          <AnchorTextLink href="#" monochrome>
            monochrome textlink
        </AnchorTextLink>{' '}
        asperiores repellendus?
      </Text>
      </Text>
      <Stack>
        <Text fontSize="large">
          <TextLink>Some text!</TextLink>
        </Text>
        <TextLink fontSize="large">Some text!</TextLink>
        <TextLink fontSize="medium">Some text!</TextLink>
        <TextLink monochrome fontSize="medium" fontWeight="bold">Some text!</TextLink>
      </Stack>
    </Stack>
  </Box>
);