import React from 'react';
import { Text, P, A } from '@lendi/ui/Typography';
import { Spacer } from '@lendi/ui/Layout';

export const Interactive = (args) => {
  return <Text {...args}>The quick brown fox jumps over the lazy dog</Text>;
};

export default Interactive;

Interactive.args = {
  tag: 'span',
  variant: 'display',
  align: undefined,
  appearance: undefined,
  isInverse: false,
};

Interactive.argTypes = {
  variant: {
    options: [
      'display1',
      'display2',
      'title1',
      'title2',
      'title3',
      'title4',
      'lead1',
      'lead2',
      'subtitle1',
      'subtitle2',
      'body1',
      'body2',
      'detail1',
      'detail2',
      'overline',
    ],
    control: {
      type: 'select',
    },
    defaultValue: 'body1',
  },
  align: {
    control: {
      type: 'select',
    },
  },
  appearance: {
    options: ['default', 'error', 'subtle'],
    control: {
      type: 'select',
    },
  },
};

export const Link = (args) => (
  <Spacer ygap="md">
    <A href="https://google.com">This is an unwrapped link</A>
    <Text variant="title2" tag="p">
      This is a <A href="https://google.com">link</A> within a heading.
    </Text>
  </Spacer>
);

export const Paragraph = (args) => (
  <Spacer ygap="md">
    <P>The quick brown fox jumps over the lazy dog</P>
    <P>
      This is a normal anchor <a href="https://google.com">link</a> within a paragraph.
    </P>
  </Spacer>
);