import VHeading from './VHeading.vue';
import VIcon from './VIcon.vue'; // For custom slot content example
import type { Meta, StoryObj } from '@storybook/vue3';

const meta: Meta<typeof VHeading> = {
  title: 'Valerie/VHeading',
  component: VHeading,
  tags: ['autodocs'],
  argTypes: {
    level: {
      control: { type: 'select' },
      options: [1, 2, 3],
      description: 'Determines the heading tag (1 for h1, 2 for h2, 3 for h3).',
    },
    text: { control: 'text', description: 'Text content of the heading (ignored if default slot is used).' },
    id: { control: 'text', description: 'Optional ID for the heading element.' },
    default: { description: 'Slot for custom heading content (overrides text prop).', table: { disable: true } },
  },
  parameters: {
    docs: {
      description: {
        component: 'A dynamic heading component that renders `<h1>`, `<h2>`, or `<h3>` tags based on the `level` prop. It relies on global styles for h1, h2, h3 from `valerie-ui.scss`.',
      },
    },
  },
};

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

export const Level1: Story = {
  args: {
    level: 1,
    text: 'This is an H1 Heading',
    id: 'heading-level-1',
  },
};

export const Level2: Story = {
  args: {
    level: 2,
    text: 'This is an H2 Heading',
  },
};

export const Level3: Story = {
  args: {
    level: 3,
    text: 'This is an H3 Heading',
  },
};

export const WithCustomSlotContent: Story = {
  render: (args) => ({
    components: { VHeading, VIcon },
    setup() {
      return { args };
    },
    template: `
      <VHeading :level="args.level" :id="args.id">
        <span>Custom Content with an Icon <VIcon name="alert" size="sm" style="color: #007bff;" /></span>
      </VHeading>
    `,
  }),
  args: {
    level: 2,
    id: 'custom-content-heading',
    // text prop is ignored when default slot is used
  },
  parameters: {
    docs: {
      description: {
        story: 'Demonstrates using the default slot for more complex heading content, such as text with an inline icon. The `text` prop is ignored in this case.',
      },
    },
  },
};

export const WithId: Story = {
  args: {
    level: 3,
    text: 'Heading with a Specific ID',
    id: 'my-section-title',
  },
};

export const EmptyTextPropAndNoSlot: Story = {
   args: {
    level: 2,
    text: '', // Empty text prop
    // No default slot content
  },
   parameters: {
    docs: {
      description: {
        story: 'Renders an empty heading tag (e.g., `<h2></h2>`) if both the `text` prop is empty and no default slot content is provided.',
      },
    },
  },
};
