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

import Spinner from '.';

const meta: Meta<typeof Spinner> = {
  component: Spinner,
  title: 'Design System/Progress Indicators/Spinner',
  tags: ['autodocs'],
  argTypes: {
    width: {
      control: 'radio',
      options: ['small', 'medium'],
      table: { defaultValue: { summary: 'medium' } },
    },
    centered: { control: 'boolean' },
    darkBackground: { control: 'boolean' },
  },
};

export default meta;

type Story = StoryObj<typeof Spinner>;

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

export const Small: Story = {
  args: {
    width: 'small',
  },
};

export const Uncentered: Story = {
  args: {
    centered: false,
  },
};

export const DarkBackground: Story = {
  args: {
    darkBackground: true,
  },
  decorators: [
    Story => (
      <div style={{ backgroundColor: '#1a1a1a', padding: '20px' }}>
        <Story />
      </div>
    ),
  ],
};