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

import { generateSvgPlaceholder } from '../../utils/storybook';
import { Stack } from '../Stack/Stack';

import { PerexBox } from './PerexBox';

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

export default meta;

type Story = StoryObj<typeof PerexBox>;

type StackStory = StoryObj<typeof Stack>;

const lorem =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit. Sed euismod, velit vel bibendum bibendum, odio augue bibendum quam, euismod bibendum elit nisi vel velit.';

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

export const WithImg: Story = {
  args: {
    children: lorem,
    src: generateSvgPlaceholder(120, 80),
    href: 'https://example.com',
  },
};

export const InStack: StackStory = {
  args: {
    gap: 'sm',
  },
  render: args => (
    <Stack {...(args as StackStory)}>
      <PerexBox src={generateSvgPlaceholder(120, 80)} href='https://example.com'>
        {lorem}
      </PerexBox>
      <PerexBox src={generateSvgPlaceholder(120, 80)} href='https://example.com'>
        {lorem}
      </PerexBox>
      <PerexBox src={generateSvgPlaceholder(120, 80)} href='https://example.com'>
        {lorem}
      </PerexBox>
    </Stack>
  ),
};