import React from "react";
import Image from "next/image";

type Feature = {
  id: number;
  details: string;
};

type Offer = {
  id: number;
  details: string;
};

interface CreditCard {
  id: number;
  name: string;
  bankname: string;
  minSalary: number;
  annualFee: string | number;
  image: string;
  features: Feature[];
  offers: Offer[];
}

const CardShotDetails: React.FC<{ card: CreditCard }> = ({ card }) => {
  return (
    <div className="bg-white rounded-lg shadow-md p-4 w-full max-w-md mx-auto sm:p-5">
      {/* Image */}
      <div className="flex justify-center mb-4">
        <Image
          src={card.image}
          alt={card.name}
          width={0}
          height={0}
          sizes="100vw"
          className="w-28 h-16 sm:w-72 sm:h-40 object-contain rounded-md"
          unoptimized={false}
        />
      </div>

      {/* Title */}
      <h3 className="text-blue-700 font-semibold text-sm sm:text-lg text-center mb-1 break-words">
        {card.name}
      </h3>

      {/* Divider */}
      <hr className="my-2 border-gray-200" />

      {/* Salary, Fee */}
      <div className="text-xs sm:text-sm space-y-1 mb-4">
        <div className="flex justify-between flex-wrap">
          <span className="text-gray-500 font-medium">Minimum Salary</span>
          <span className="font-semibold text-black">
            AED {parseInt(String(card.minSalary)).toLocaleString()}
          </span>
        </div>
        <div className="flex justify-between flex-wrap">
          <span className="text-gray-500 font-medium">Annual Fee</span>
          <span className="font-semibold text-black">AED {card.annualFee}</span>
        </div>
      </div>

{/* Features */}
{card.features.length > 0 && (
  <div className="hidden sm:block">
    <h4 className="font-semibold text-sm text-gray-700 mt-4 mb-2">
      Features
    </h4>
    <ul className="text-sm text-gray-800 space-y-2">
      {card.features.slice(0,4).map((feature) => (
        <li key={feature.id} className="flex gap-2 items-start">
          <span className="text-red-500 mt-0.5">✔️</span>
          <span className="break-words">{feature.details}</span>
        </li>
      ))}
    </ul>
  </div>
)}

      {/* Uncomment if you need Offers */}
      {/* {card.offers.length > 0 && (
        <>
          <h4 className="font-semibold text-xs sm:text-sm text-gray-700 mt-4 mb-2">
            Offers
          </h4>
          <ul className="text-xs sm:text-sm text-gray-800 space-y-2">
            {card.offers.map((offer) => (
              <li key={offer.id} className="flex gap-2 items-start">
                <span className="text-green-600 mt-0.5">🎁</span>
                <span className="break-words">{offer.details}</span>
              </li>
            ))}
          </ul>
        </>
      )} */}
    </div>
  );
};

export default CardShotDetails;