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

const meta: Meta<typeof FdsH2> = {
  title: 'FDS/Typography/FdsH2',
  component: FdsH2,
  tags: ['autodocs'],
  argTypes: {
    size: { control: { type: 'select' }, options: ['xl', 'lg', 'md', 'sm', 'responsive'] },
    text: { control: { type: 'text' } },
  },
  args: {
    size: 'responsive',
    text: 'H2 Heading',
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { FdsH2 },
    setup: () => ({ args }),
    template: `<FdsH2 :size="args.size" :text="args.text" />`,
  }),
}

export const Responsive: Story = {
  args: {
    size: 'responsive',
    text: 'Responsive H2 Heading',
  },
}