import type { Meta, StoryObj } from "@storybook/react-vite";

import { AddIcon, DeleteIcon, EditIcon } from "./index";

const meta = {
	component: AddIcon,
	parameters: {
		docs: {
			description: {
				component:
					"Статичные SVG: size по умолчанию 24, strokeWidth 1.5, цвет currentColor. В кнопке иконка декоративная, имя принадлежит действию. Для самостоятельного изображения задайте aria-hidden={false}, role=img и aria-label либо aria-labelledby. Геометрия взята из Card/Cards; подписи и действия остаются у приложения.",
			},
		},
	},
	tags: ["autodocs"],
	title: "Design System/Icons",
} satisfies Meta<typeof AddIcon>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Decorative: Story = {
	render: () => (
		<div style={{ color: "#2563eb", display: "flex", gap: 16 }}>
			<button aria-label="Добавить пример" type="button">
				<AddIcon size={20} strokeWidth={2} />
			</button>

			<button aria-label="Изменить пример" type="button">
				<EditIcon size={18} />
			</button>

			<button aria-label="Удалить пример" type="button">
				<DeleteIcon size={18} />
			</button>
		</div>
	),
};

export const Meaningful: Story = {
	render: () => (
		<div style={{ color: "#2563eb", display: "flex", gap: 16 }}>
			<AddIcon aria-hidden={false} aria-label="Добавление" role="img" />

			<EditIcon aria-hidden={false} aria-label="Редактирование" role="img" />

			<DeleteIcon aria-hidden={false} aria-label="Удаление" role="img" />
		</div>
	),
};