import 'react-material-symbols/rounded'

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

import { Spinner } from './Spinner'

const meta: Meta<typeof Spinner> = {
  title: 'Components/Spinner',
  component: Spinner,
  argTypes: {},
}

export default meta

type Story = StoryObj<typeof Spinner>

function Wrapper({
  children,
  backgroundColor,
}: {
  children: React.ReactNode
  backgroundColor?: string
}) {
  return (
    <div
      style={{
        height: '200px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor,
      }}
    >
      {children}
    </div>
  )
}

export const Default: Story = {
  args: {
    color: 'Accent',
    size: 'Medium',
  },
  decorators: [
    (Story) => (
      <Wrapper>
        <Story />
      </Wrapper>
    ),
  ],
}

export const Inverted: Story = {
  args: {
    color: 'Inverted',
    size: 'Medium',
  },
  decorators: [
    (Story) => (
      <Wrapper backgroundColor="var(--Icon-Interactive-Default)">
        <Story />
      </Wrapper>
    ),
  ],
}

export const Small: Story = {
  args: {
    size: 'Small',
  },
  decorators: [
    (Story) => (
      <Wrapper>
        <Story />
      </Wrapper>
    ),
  ],
}

export const Medium: Story = {
  args: {
    size: 'Medium',
  },
  decorators: [
    (Story) => (
      <Wrapper>
        <Story />
      </Wrapper>
    ),
  ],
}

export const Large: Story = {
  args: {
    size: 'Large',
  },
  decorators: [
    (Story) => (
      <Wrapper>
        <Story />
      </Wrapper>
    ),
  ],
}