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

import SeeMoreText from '.';

const meta: Meta<typeof SeeMoreText> = {
  component: SeeMoreText,
  title: 'Composed Components/SeeMoreText',
  tags: ['autodocs'],
  args: {
    text: 'Juane Algebra',
  },
};

export default meta;

type Story = StoryObj<typeof SeeMoreText>;

export const Default: Story = {
  args: {},
};

export const LongHTML: Story = {
  args: {
    isHtmlText: true,
    text: `<p style="width: auto;">QA 9/JUN - Descripción HTML</p>
<p style="width: auto;"><strong style="width: auto;">QA 9/JUN - Descripción HTMLQA 9/JUN - Descripción HTML</strong></p>
<p style="width: auto;"><span style="text-decoration: underline; width: auto;"><strong style="width: auto;">QA 9/JUN - Descripción HTML</strong></span></p>
<p style="width: auto;"><s style="width: auto;"><span style="text-decoration: underline; width: auto;"><strong style="width: auto;">QA 9/JUN - Descripción HTML</strong></span></s></p>
<p style="width: auto;"><s style="width: auto;"><span style="text-decoration: underline; width: auto;"><strong style="width: auto;">QA 9/JUN - Descripción HTML</strong></span></s></p>
<ol style="width: auto; overflow-x: auto;">
<li style="width: auto;"><strong style="width: auto;">1</strong></li>
<li style="width: auto;"><strong style="width: auto;">2</strong></li>
</ol>
<ul style="width: auto; overflow-x: auto;">
<li style="width: auto;"><strong style="width: auto;">3</strong><strong style="width: auto;">- lala</strong></li>
</ul>`,
  },
};

export const ShortHTML: Story = {
  args: {
    isHtmlText: true,
    text: `<p style="width: auto;">QA 9/JUN - Descripción HTML</p>
<ol style="width: auto; overflow-x: auto;">
<li style="width: auto;"><strong style="width: auto;">2</strong></li>
</ol>`,
  },
};