import { Stack } from "@mantine/core";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { EntryCard } from "@wealthledger/ui";
import { BankOperationIcon } from "./BankOperationIcon";

const meta = {
	title: "Product/BankCards/OperationIcons",
	component: BankOperationIcon,
	tags: ["autodocs"],
	args: { kind: "expense", categoryName: "Продукты" },
} satisfies Meta<typeof BankOperationIcon>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Categories: Story = {
	render: () => (
		<Stack maw={640}>
			{[
				"Алкоголь",
				"Вклады",
				"Другое",
				"Жильё",
				"Здоровье",
				"Инвестиции и накопления",
				"Кафе",
				"Образование",
				"Переводы",
				"Погашение кредита",
				"Подписки",
				"Покупки",
				"Продукты",
				"Путешествия",
				"Развлечения",
				"Связь и интернет",
				"Снятие наличных",
				"Ставки",
				"Страхование",
				"Табак",
				"Такси",
				"Транспорт",
				"Хостинг и ИИ-сервисы",
				"Цифровые покупки",
				"Моя категория",
			].map((name) => (
				<EntryCard
					key={name}
					title="Расход"
					metadata={`12.09.2026 · ${name}`}
					initial="Р"
					color="red"
					icon={<BankOperationIcon kind="expense" categoryName={name} />}
					value="−1 250,00 ₽"
					valueLabel="Расход"
					tone="negative"
				/>
			))}
			<EntryCard
				title="Пополнение"
				metadata="12.09.2026"
				initial="П"
				color="green"
				icon={<BankOperationIcon kind="topup" />}
				value="+15 000,00 ₽"
				valueLabel="Пополнение"
				tone="positive"
			/>
		</Stack>
	),
};