/* eslint-disable @typescript-eslint/no-explicit-any */
/** @jsxImportSource @emotion/react */
import { getStyleMap } from "@/utils/getStyleMap";
import { css } from "@emotion/react";
import { useMemo } from "react";
export const Card = ({
  isClassTrue = true,
  trueClasses = [],
  falseClasses = [],
  context,
  cardName,cardCaption,cardValue,cardImage,imageWidth,cardHeight}:any) => {
  const cardContainer = css`
    background-color: #e91e63; /* Similar pink-red background color */
    border-radius: 10px;
    color: white;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:${cardHeight||150}px;
    max-width: 800px; /* Adjust as needed */
    min-width: 300px; /* Prevent card shrinking too much */
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: "Arial", sans-serif; /* Match font family */
  `;

  const cardContent = css`
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
  `;

  const cardNameStyle = css`
    font-size: 20px; /* Match font size */
    margin: 0;
    margin-bottom:15px;
    text-align:left;
  `;

  const cardBalanceLabel = css`
    font-size: 14px;
    font-weight:350;
    margin: 1px 0;
    color:#e1e5e8;
    text-align:left;
  `;

  const cardBalanceAmount = css`
    font-size: 36px; /* Prominent balance font */
    font-weight: bold;
    margin: 0;
     text-align:left;
  `;

  const cardImageStyle = css`
    flex-shrink: 0; /* Prevent the image from shrinking */
    margin-left: 20px; /* Add spacing between text and image */
    img {
      width: ${imageWidth||130}px; 
      height: auto;
    }
  `;
const style = useMemo(() => {
    return getStyleMap(trueClasses, falseClasses, isClassTrue, context);
  }, [trueClasses, falseClasses, isClassTrue, context]);
  return (
    <div css={[cardContainer,style]}>
      <div css={cardContent}>
        <h1 css={cardNameStyle}>{cardName}</h1>
        <p css={cardBalanceLabel}>{cardCaption}</p>
        <p css={cardBalanceAmount}>RO {cardValue}</p>
      </div>
      <div css={cardImageStyle}>
        <img
          src={cardImage||`${"http://52.183.132.161/backend"}/api/uploads/image/32`} // Replace with your image path
          alt="Illustration"
        />
      </div>
    </div>
  );
};

export default Card;
