import type { Meta, StoryObj } from '@storybook/vue3'
import FdsSpinner from './FdsSpinner.vue'

const meta: Meta<typeof FdsSpinner> = {
  title: 'FDS/FdsSpinner',
  component: FdsSpinner,
  tags: ['autodocs'],
  argTypes: {
    size: { control: { type: 'text' } },
    color: { control: { type: 'inline-radio' }, options: ['inherit', 'black', 'white', 'blue'] },
    label: { control: { type: 'text' } },
    labelPosition: { control: { type: 'inline-radio' }, options: ['right', 'bottom'] },
  },
  args: {
    size: '48px',
    color: 'inherit',
    label: '',
    labelPosition: 'bottom',
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Basic: Story = {
  render: (args: Story['args']) => ({
    components: { FdsSpinner },
    setup: () => ({ args }),
    template: '<FdsSpinner v-bind="args" />',
  }),
}