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

import { Stack } from "@mantine/core";
import { OperationIcon } from "@wealthledger/icons";
import { EntryCard } from "@wealthledger/ui";

import { bankOperationAppearance } from "../../model/operation-appearance";

const BankOperationIcon = (props: {
	categoryName?: null | string;
	kind: "expense" | "refund" | "topup" | "transfer";
}) => (
	<OperationIcon {...bankOperationAppearance(props.kind, props.categoryName)} />
);

const meta = {
	args: { categoryName: "Продукты", kind: "expense" },
	component: BankOperationIcon,
	tags: ["autodocs"],
	title: "Product/BankCards/OperationIcons",
} satisfies Meta<typeof BankOperationIcon>;

export default meta;

type Story = StoryObj<typeof meta>;

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

			<EntryCard
				color="green"
				icon={<BankOperationIcon kind="topup" />}
				initial="П"
				metadata="12.09.2026"
				title="Пополнение"
				tone="positive"
				value="+15 000,00 ₽"
				valueLabel="Пополнение"
			/>
		</Stack>
	),
};