import type { StoryFn } from '@storybook/vue3-vite';

import N8nHeading from './Heading.vue';

export default {
	title: 'Core/Heading',
	component: N8nHeading,
	argTypes: {
		step: {
			control: {
				type: 'select',
			},
			options: [undefined, '4xs', '3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
		},
		size: {
			control: {
				type: 'select',
			},
			options: ['2xlarge', 'xlarge', 'large', 'medium', 'small'],
		},
		color: {
			control: {
				type: 'select',
			},
			options: ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight'],
		},
	},

	parameters: {
		docs: {
			description: { component: 'A typographic heading component for section and page titles.' },
		},
	},
};

const Template: StoryFn = (args, { argTypes }) => ({
	setup: () => ({ args }),
	props: Object.keys(argTypes),
	components: {
		N8nHeading,
	},
	template: '<n8n-heading v-bind="args">hello world</n8n-heading>',
});

export const Heading = Template.bind({});
