import React from "react";
import { Card, CardContent, Chip, Typography } from "@material-ui/core";
import { Grid } from "../../../UI/Grid";
import eCheckLogo from "../../../assets/paymentIcons/echeck-logo.svg";
const logos = {
    default: eCheckLogo,
};
/**
 * PaymentBankDetails component displays the bank details of a payment method.
 * It shows the card logo, nickname, routing number, and an inactive chip if the card is not active.
 *
 * @param {Object} props - The component props.
 * @param {CardData} props.bankData - The bank data containing payment token and routing number.
 * @returns {JSX.Element} The rendered PaymentBankDetails component.
 */
export const PaymentBankDetails = ({ bankData }) => {
    const { paymentToken, routingNumber } = bankData || {};
    const getCardLogo = (nickname) => {
        const lowerNickname = nickname === null || nickname === void 0 ? void 0 : nickname.toLowerCase();
        if (lowerNickname.includes("visa"))
            return logos.default;
        return logos.default;
    };
    const styles = {
        card: {
            border: 0,
            padding: "5px 15px",
            width: "100%",
        },
        logoContainer: {
            border: "2px solid #e0e0e0",
            borderRadius: "8px",
            padding: "8px",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "42px",
            width: "70px",
        },
        logoImage: {
            width: 52,
            height: "auto",
            objectFit: "contain",
        },
        nickname: {
            fontWeight: 600,
        },
        expiration: {
            fontWeight: 400,
        },
        expiredChip: {
            fontWeight: "bold",
        },
    };
    return (React.createElement(Card, { variant: "outlined", style: styles.card }, React.createElement(CardContent, { style: { padding: "5px 0" } }, React.createElement(Grid, { container: true, alignItems: "center", spacing: 2 }, React.createElement(Grid, { item: true }, React.createElement("div", { style: styles.logoContainer }, React.createElement("img", { src: getCardLogo((paymentToken === null || paymentToken === void 0 ? void 0 : paymentToken.nickname) || ""), alt: "Card Logo", style: styles.logoImage }))), React.createElement(Grid, { item: true, xs: true }, React.createElement(Typography, { variant: "body1", style: styles.nickname }, (paymentToken === null || paymentToken === void 0 ? void 0 : paymentToken.nickname) || "Unknown Card"), React.createElement(Typography, { variant: "subtitle2", color: "textSecondary", style: styles.expiration }, "Routing Number: ", " ", routingNumber
        ? routingNumber
        : "N/A")), React.createElement(Grid, { item: true, style: { marginRight: "15px" } }, !(paymentToken === null || paymentToken === void 0 ? void 0 : paymentToken.active) && (React.createElement(Chip, { label: "Inactive", color: "secondary", size: "small", style: styles.expiredChip })))))));
};
//# sourceMappingURL=PaymentBankDetails.js.map