import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import Close from "./Close";

const meta: Meta<typeof Close> = {
	title: 'Buttons/Close',
	component: Close,
	argTypes: { onClick: { action: 'clicked' } },
	parameters: {
		argTypes: {
			color: {
				description: "Color of the icon. Defaults to `green`.",
			},
			size: {
				description: "Size of the icon. Defaults to `l`.",
			},
		},
		controls: {
			include: [
				'aria-label',
				'color',
				'className',
				'id',
				'onClick',
				'size',
			],
		},
	},
	decorators: [
		Story => (
			<div style={{ height: '80px' }}>
				<Story />
			</div>
		),
	],
};

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

export const CloseButton: Story = {
	args: {
		'aria-label': 'Close',
		id: 'example-close',
		className: 'close-button',
		size: 'l',
	},
};