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

import { Strong } from './Strong';

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

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

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 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,
  },
};