// LoadingBoxes.stories.tsx
import { Meta, StoryFn, StoryObj } from '@storybook/react';
import React from 'react';

import { LoadingBoxes } from '.';

export default {
  args: {},
  component: LoadingBoxes,
  title: 'Components/LoadingBoxes',
} as Meta<typeof LoadingBoxes>;

const Template: StoryFn<typeof LoadingBoxes> = (args) => (
  <div
    // eslint-disable-next-line react/forbid-dom-props
    style={{
      background: '#000',
      display: 'inline-block',
      // better contrast for the white squares
      padding: 24,
    }}
  >
    <LoadingBoxes {...args} />
  </div>
);

export const Default: StoryObj<typeof LoadingBoxes> = {
  args: {},
  render: Template,
};

export const Large: StoryObj<typeof LoadingBoxes> = {
  args: { gap: 8, size: 18 },
  render: Template,
};

export const EightBoxes: StoryObj<typeof LoadingBoxes> = {
  args: { count: 8 },
  render: Template,
};