import { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { Spinner } from "./Spinner"
type Story = StoryObj<typeof Spinner>

const meta: Meta<typeof Spinner> = {
  title: "Design System/Spinner",
  component: Spinner,
}

export default meta

export const Xsmall: Story = {
  args: {
    size: "xs",
  },
}

export const Small: Story = {
  args: {
    size: "sm",
  },
}

export const Medium: Story = {
  args: {
    size: "md",
  },
}

export const Large: Story = {
  args: {
    size: "lg",
  },
}

export const WithColor: Story = {
  args: {
    color: "blue-1",
  },
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <Spinner {...Xsmall.args} />
        <Spinner {...Small.args} />
        <Spinner {...Medium.args} />
        <Spinner {...Large.args} />
        <Spinner {...WithColor.args} />
      </TestGridContainer>
    )
  },
}