import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { formatMoney } from "@/shared/lib";
import type { BankCard } from "../api/queries";
import classes from "./BankCardFace.module.css";

type BankCardFaceProps = { card: BankCard };
const BankCardFace: FC<BankCardFaceProps> = (props) => {
	const { card } = props;
	const { t } = useTranslation();
	const bank = card.bankName?.toLocaleLowerCase("ru") ?? "";
	const tone = /сбер|sber/.test(bank)
		? "green"
		: /тинькофф|т[ -]?банк|t[ -]?bank|tinkoff/.test(bank)
			? "yellow"
			: /альфа|alfa/.test(bank)
				? "red"
				: /втб|vtb|газпром|gazprom/.test(bank)
					? "blue"
					: "graphite";
	return (
		<div className={classes.face} data-tone={tone}>
			<div className={classes.top}>
				<span className={classes.bank}>{card.bankName || t("bank.card")}</span>
				{card.archivedAt && (
					<span className={classes.archive}>{t("bank.archived")}</span>
				)}
			</div>
			<div className={classes.hardware} aria-hidden="true">
				<span className={classes.chip} />
				<svg
					aria-hidden="true"
					width="24"
					height="30"
					viewBox="0 0 24 30"
					fill="none"
				>
					<path
						d="M7 11a8 8 0 0 1 0 8m5-12a15 15 0 0 1 0 16m5-20a23 23 0 0 1 0 24"
						stroke="currentColor"
						strokeWidth="2"
						strokeLinecap="round"
					/>
				</svg>
			</div>
			<div
				className={classes.number}
			>{`•••• •••• •••• ${card.lastFour || "••••"}`}</div>
			<div className={classes.bottom}>
				<div className={classes.details}>
					<div className={classes.name}>{card.name}</div>
					<div className={classes.balance}>{formatMoney(card.balance)}</div>
				</div>
				{card.paymentSystem && (
					<span className={classes.network} data-network={card.paymentSystem}>
						{card.paymentSystem === "mastercard" && (
							<span className={classes.circles} aria-hidden="true" />
						)}
						{t(`bank.paymentSystems.${card.paymentSystem}`)}
					</span>
				)}
			</div>
		</div>
	);
};

export { BankCardFace };