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

interface Feature {
  id: number;
  details: string;
}

interface Offer {
  id: number;
  details: string;
}

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

const Card: React.FC<{ card: CreditCard }> = ({ card }) => {
  return (
    <div className="border rounded-lg p-4 shadow-md bg-white w-full space-y-4">
      
      {/* First Row: Image and Card Details */}
      <div className="flex flex-col sm:flex-row gap-4">
        <div className="flex-shrink-0 w-full sm:w-1/2">
          <Image
            src={card.image && card.image.trim() !== "" ? card.image : "/default.webp"}
            alt={card.name || "Card Image"}
            width={250}
            height={64}
            className="object-contain"
            priority
          />
          
        </div>
        <div className="w-full sm:w-1/2">
          <h3 className="text-lg font-semibold mb-2">{card.name}</h3>
<div className="space-y-1 text-sm">
  <div className="flex items-start gap-2">
    <span className="font-medium text-gray-600">🏦 Bank:</span>
    <span>{card.bankname}</span>
  </div>
  <div className="flex items-start gap-2">
    <span className="font-medium text-gray-600">💼 Min Salary:</span>
    <span>{card.minSalary.toLocaleString()} AED</span>
  </div>
  <div className="flex items-start gap-2">
    <span className="font-medium text-gray-600">💳 Annual Fee:</span>
    <span>{card.annualFee}</span>
  </div>
</div>
        </div>
      </div>

      {/* Second Row: Features and Offers */}
      <div className="flex flex-col sm:flex-row gap-4">
        {card.features && card.features.length > 0 && (
          <ul className="text-sm list-disc list-inside w-full sm:w-1/2">
            {card.features.map((feature) => (
              <li key={feature.id}>✔ {feature.details}</li>
            ))}
          </ul>
        )}
        {card.offers && card.offers.length > 0 && (
          <ul className="text-sm list-disc list-inside w-full sm:w-1/2">
            {card.offers.map((offer) => (
              <li key={offer.id}>🎁 {offer.details}</li>
            ))}
          </ul>
        )}
      </div>

      {/* Third Row: Apply Button */}
      <div className="text-center">
        <button className="bg-red-600 text-white py-2 px-6 rounded-md hover:bg-red-700 transition">
          Apply Now
        </button>
      </div>
    </div>
  );
};

export default Card;