import type { FC } from "react";
import { bindIconAnimation } from "@/shared/lib";
import type { BankOperation } from "../api/queries";

import { bankOperationAppearance } from "../model/operation-appearance";
import classes from "./BankOperationIcon.module.css";

type BankOperationIconProps = {
	kind: BankOperation["kind"];
	categoryName?: string | null;
};
const BankOperationIcon: FC<BankOperationIconProps> = (props) => {
	const icon = bankOperationAppearance(props.kind, props.categoryName);
	return (
		<svg
			ref={bindIconAnimation}
			className={`${classes.icon} ${icon.animation ? classes[icon.animation] : ""}`}
			width="24"
			height="24"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			strokeWidth="1.6"
			strokeLinecap="round"
			strokeLinejoin="round"
			aria-hidden="true"
			focusable="false"
			style={{ flexShrink: 0, color: `var(--mantine-color-${icon.color}-7)` }}
		>
			{icon.path.split(" M").map((part, index) => (
				<path key={part} d={index ? `M${part}` : part} pathLength={1} />
			))}
		</svg>
	);
};

export { BankOperationIcon };