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

const meta: Meta<typeof VIcon> = {
  title: 'Valerie/VIcon',
  component: VIcon,
  tags: ['autodocs'],
  argTypes: {
    name: {
      control: 'select',
      options: ['alert', 'search', 'close'], // Example icon names
    },
    size: {
      control: 'radio',
      options: ['sm', 'lg', undefined],
    },
  },
};

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

export const Default: Story = {
  args: {
    name: 'alert',
  },
};

export const Small: Story = {
  args: {
    name: 'search',
    size: 'sm',
  },
};

export const Large: Story = {
  args: {
    name: 'close',
    size: 'lg',
  },
};

export const CustomName: Story = {
  args: {
    name: 'custom-icon-name', // This will need a corresponding CSS class
  },
  // Add a note about needing CSS for custom icons if not handled by a library
  parameters: {
    notes: 'This story uses a custom icon name. Ensure that a corresponding CSS class (e.g., .icon-custom-icon-name) is defined in VIcon.scss or your global icon styles for the icon to be visible.',
  },
};
