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

const meta: Meta<typeof VSpinner> = {
  title: 'Valerie/VSpinner',
  component: VSpinner,
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: 'select',
      options: ['sm', 'md'],
      description: 'Size of the spinner.',
    },
    label: {
      control: 'text',
      description: 'Accessible label for the spinner (visually hidden).',
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'A simple animated spinner component to indicate loading states. It uses CSS animations for the dots and provides accessibility attributes.',
      },
    },
    layout: 'centered', // Center the spinner in the story
  },
};

export default meta;
type Story = StoryObj<typeof VSpinner>;

export const DefaultSizeMedium: Story = {
  args: {
    size: 'md',
    label: 'Loading content...',
  },
};

export const SmallSize: Story = {
  args: {
    size: 'sm',
    label: 'Processing small task...',
  },
};

export const CustomLabel: Story = {
  args: {
    size: 'md',
    label: 'Please wait while data is being fetched.',
  },
};

export const OnlySpinnerNoLabelArg: Story = {
  // The component has a default label "Loading..."
  args: {
    size: 'md',
    // label prop not set, should use default
  },
   parameters: {
    docs: {
      description: { story: 'Spinner using the default accessible label "Loading..." when the `label` prop is not explicitly provided.' },
    },
  },
};
