frontend/src/entities/bank-card/ui/BankCardFace/BankCardFace.stories.tsx

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

import { SimpleGrid } from "@mantine/core";

import { BankName } from "../../model/bank";
import { BankCardFace } from "./BankCardFace";

const meta
	= {
		args: {
			card: {
				archivedAt: null,
				balance: { currency: "RUB", value: "128450.75" },
				bankName: BankName.Sberbank,
				id: "fictional",
				lastFour: "4829",
				name: "Для повседневных покупок",
				openingBalance: { currency: "RUB", value: "0" },
				openingDate: "2026-01-01",
				paymentSystem: "mir",
				version: 1,
			},
		},
		component: BankCardFace,
		tags: ["autodocs"],
		title: "Product/BankCards/CardAppearance",
	} satisfies Meta<typeof BankCardFace>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Banks: Story = {
	render: arguments_ => (
		<SimpleGrid cols={{ base: 1, sm: 2 }} maw={920}>
			{[
				BankName.Sberbank,
				BankName.TBank,
				BankName.AlfaBank,
				BankName.Vtb,
				null,
			].map((bankName, index) => (
				<BankCardFace
					card={{
						...arguments_.card,
						bankName,
						paymentSystem:
								// eslint-disable-next-line security/detect-object-injection -- This is a positional index into the local array, not a user-supplied object key.
								(["mir", "mastercard", "visa", "mir", null] as const)[index]
								?? null,
					}}
					key={bankName ?? "unknown"}
				/>
			))}
		</SimpleGrid>
	),
};

export const MissingDetails: Story
	= {
		args: {
			card: {
				...meta.args.card,
				bankName: null,
				lastFour: null,
				paymentSystem: null,
			},
		},
	};

export const LongArchived: Story = {
	args: {
		card: {
			...meta.args.card,
			archivedAt: "2026-09-12",
			balance: { currency: "RUB", value: "184467440737095516.14" },
			bankName: "Банк с очень длинным названием без пробелов".repeat(2),
			name: "Карта с очень длинным пользовательским названием для повседневных покупок",
			paymentSystem: "mastercard",
		},
	},
};