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

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

export default meta
type Story = StoryObj<typeof meta>

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

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