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

import { Spinner } from '@/components/ui/spinner'

const meta = {
  title: 'Feedback/Spinner',
  component: Spinner,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
} satisfies Meta<typeof Spinner>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {}

export const Small: Story = {
  args: {
    className: 'size-3 animate-spin',
  },
}

export const Large: Story = {
  args: {
    className: 'size-8 animate-spin',
  },
}

export const ExtraLarge: Story = {
  args: {
    className: 'size-12 animate-spin',
  },
}

export const WithText: Story = {
  render: () => (
    <div className="flex items-center gap-2">
      <Spinner />
      <span className="text-sm text-muted-foreground">Loading...</span>
    </div>
  ),
}

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