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

import { DocsTemplate } from '../../../.storybook'
import Spinner from './Spinner'

const meta: Meta<typeof Spinner> = {
  title: 'Components/Loaders/Spinner',
  component: Spinner,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=3591-3039&t=CdMnrLNv0lNFwXr0-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=3591-3039&t=CdMnrLNv0lNFwXr0-0'
          description={
            <span>
              The <code>Spinner</code> component is a visual indicator used to
              convey a loading or in-progress state. It provides users with a
              clear and dynamic cue that an operation is ongoing, offering a
              responsive and engaging experience during tasks that require some
              time to complete.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Implement the <code>Spinner</code> component to indicate loading
              or in-progress states, such as when fetching data, submitting a
              form, or processing a request.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof Spinner>

const Template: Story = {
  render: (args) => <Spinner {...args} />,
}

export const Basic: Story = {
  ...Template,
}

export const Large: Story = {
  ...Template,
  args: {
    size: 'large',
  },
}