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

import { Spinner } from './spinner';
import { Button } from '../button/button';

const meta = {
  title: 'Components/Spinner',
  component: Spinner,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Indeterminate loading indicator. Prefer a Skeleton when you know the shape of what is arriving — it communicates more and avoids a layout shift.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Spinner>;

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

export const Default: Story = {};

export const Sizes: Story = {
  render: () => (
    <div className="flex items-center gap-4">
      <Spinner className="size-4" />
      <Spinner className="size-6" />
      <Spinner className="size-8 text-primary" />
    </div>
  ),
};

/** Inside a button, label the action rather than the spinner. */
export const InButton: Story = {
  render: () => (
    <Button disabled>
      <Spinner label="Saving" />
      Saving…
    </Button>
  ),
};