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

import { Button } from '../Button/Button';
import { Stack } from '../Stack/Stack';

import { Spacer } from './Spacer';

const meta: Meta<typeof Spacer> = {
  title: 'UI kit/Spacer',
  component: Spacer,
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: { type: 'radio' },
      options: [true, false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
    },
  },
};

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

export const Default: Story = {
  args: {
    grow: false,
    size: true,
  },
  render: props => <Spacer {...props} />,
  decorators: [
    (Story: React.ComponentType, context) => (
      <Stack align='start' orientation='horizontal' gap={false}>
        <Button variant='secondary'>Back</Button>
        <Story />
        <Button variant='primary'>Hello</Button>
        <Spacer {...context.args} grow={false} />
        <Button variant='action'>world</Button>
      </Stack>
    ),
  ],
};

export const Vertical: Story = {
  args: {
    grow: false,
    size: true,
  },
  render: props => <Spacer {...props} />,
  decorators: [
    (Story: React.ComponentType, context) => (
      <Stack align='start' grow gap={false}>
        <Button variant='secondary'>Back</Button>
        <Story />
        <Button variant='primary'>Hello</Button>
        <Spacer {...context.args} grow={false} />
        <Button variant='action'>world</Button>
      </Stack>
    ),
  ],
};