import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Text } from './Text';

const meta: Meta<typeof Text> = {
  title: 'UI kit/Typography/Text',
  component: Text,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Text>;

export const Default: Story = {
  args: {
    children: 'Inline text.',
  },
};

export const AppearanceHeading1: Story = {
  args: {
    appearance: 'h1',
    children: 'Looks like Heading 1',
  },
};

export const AppearanceHeading2: Story = {
  args: {
    appearance: 'h2',
    children: 'Looks like Heading 2',
  },
};

export const AppearanceHeading3: Story = {
  args: {
    appearance: 'h3',
    children: 'Looks like Heading 3',
  },
};

export const AppearanceHeading4: Story = {
  args: {
    appearance: 'h4',
    children: 'Looks like Heading 4',
  },
};

export const AppearanceHeading5: Story = {
  args: {
    appearance: 'h5',
    children: 'Looks like Heading 5',
  },
};

export const AppearanceBodyCopyL: Story = {
  args: {
    appearance: 'lg',
    children: 'Lorem ipsum',
  },
};

export const AppearanceBodyCopyM: Story = {
  args: {
    appearance: 'md',
    children: 'Lorem ipsum',
  },
};

export const AppearanceBodyCopyS: Story = {
  args: {
    appearance: 'sm',
    children: 'Lorem ipsum',
  },
};

export const AppearanceStrongBodyCopyL: Story = {
  args: {
    appearance: 'strong-lg',
    children: 'Lorem ipsum',
  },
};

export const AppearanceStrongBodyCopyM: Story = {
  args: {
    appearance: 'strong-md',
    children: 'Lorem ipsum',
  },
};

export const AppearanceStrongBodyCopyS: Story = {
  args: {
    appearance: 'strong-sm',
    children: 'Lorem ipsum',
  },
};

export const Truncated: Story = {
  args: {
    children:
      'This is a very long heading that should be truncated. This is a very long heading that should be truncated. This is a very long heading that should be truncated.',
    truncate: true,
  },
};

export const Strong: Story = {
  args: {
    children: (
      <>
        Product <strong>192312931</strong>
      </>
    ),
  },
};