import React, { useCallback } from "react";

export const CreditCard = ({
  cardWidth = 250,
  bank_name = "BANK NAME",
  card_no ,
  // = 6524,
  cardholder_name,
  expiry_date = "00/00",
  triggerEventHandler,
}) => {
  const cardHeight = (cardWidth * 3) / 7;
  const handleOnClick = useCallback(() => {
    triggerEventHandler("click");
  }, [triggerEventHandler]);
  return ( 
    <div
      style={{
        width: "100%",
        // cardWidth,
        height: cardHeight,
        borderRadius: `${cardWidth / 23}px`,
        backgroundColor: "#1c1c1c",
        color: "#ffffff",
        padding: `${cardHeight / 10}px`,
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)",
      }}
      onClick={handleOnClick}
    >
      {/* Top Section */}
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        {/* <div style={{ fontSize: `${cardHeight / 10}px`, fontWeight: "bold" }}>
          Credit Card
        </div> */}
        <div style={{ fontSize: `${cardHeight / 10 - 2}px` }}>{bank_name}</div>
      </div>

      {/* Chip and Card Number */}
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <div
          style={{
            width: `${cardHeight / 5}px`,
            height: `${cardHeight / 5}px`,
            backgroundColor: "#d4a74d",
            borderRadius: "5px",
          }}
        ></div>
        <div
          style={{ fontSize: `${cardHeight / 10 + 2}px`, letterSpacing: "2px",width:"100%" }}
        >
          **** **** **** {card_no}
        </div>
      </div>

      {/* Card Details */}
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <div>
          {/* <div style={{ fontSize: '12px', marginBottom: '5px' }}>6324</div> */}
          <div
            style={{ fontSize: `${cardHeight / 20 + 4}px`, fontWeight: "bold" }}
          >
            {cardholder_name}
          </div>
        </div>
        <div
          style={{ textAlign: "right", fontSize: `${cardHeight / 20 + 2}px` }}
        >
          <div>EXP</div>
          <div>{expiry_date}</div>
        </div>
      </div>

      {/* Card Bottom Section */}
      {/* <div
        style={{
          fontSize: '18px',
          letterSpacing: '2px',
          textAlign: 'center',
        }}
      >
        4532 3100 9999 1049
      </div> */}
    </div>
  );
};

export default CreditCard;
