"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-sm bg-white w-full text-sm">
      {/* Top Row: Image + Details */}
      <div className="flex flex-wrap sm:flex-nowrap justify-between gap-4">
        {/* Left: Image + Bank/Card Names */}
        <div className="flex gap-4 items-start">
          <Image
            src={card.image && card.image.trim() !== "" ? card.image : "/default.webp"}
            alt={card.name || "Card Image"}
            width={150}
            height={150}
            className="object-contain rounded-md"
            priority
          />
          <div>
            <h3 className="text-base font-semibold text-gray-800">{card.bankname}</h3>
            <p className="text-gray-600">{card.name}</p>
          </div>
        </div>

        {/* Right: Salary & Fee */}
        <div className="flex flex-col sm:items-end text-right space-y-1">
          <div>
            <span className="text-gray-500">Minimum Salary (AED)</span><br />
            <span className="font-semibold">{card.minSalary}</span>
          </div>
          <div>
            <span className="text-gray-500">Annual Fee (AED)</span><br />
            <span className="font-semibold">{card.annualFee}</span>
          </div>
        </div>
      </div>

      {/* Offers */}
      {card.offers && card.offers.length > 0 && (
        <div className="mt-4 flex flex-wrap items-start gap-6">
          <span className="text-green-600 font-semibold whitespace-nowrap">🎁 Offers</span>
          <ul className="flex flex-wrap gap-x-4 list-disc list-inside text-gray-700">
            {card.offers.map((offer) => (
              <li key={offer.id}>{offer.details}</li>
            ))}
          </ul>
        </div>
      )}

      {/* Buttons (Always visible) */}
      <div className="mt-4 flex gap-2 justify-end">
        <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
          Apply Now
        </button>
        <button className="border border-red-500 text-red-500 px-4 py-2 rounded hover:bg-green-50 transition">
          View Offers
        </button>
         <button className="bg-green-600 text-white px-4 py-2 rounded hover:bg-red-700 transition">
          View Details
        </button>
      </div>

      {/* Features */}
      {card.features && card.features.length > 0 && (
        <div className="mt-4 bg-yellow-50 p-3 rounded-md flex flex-wrap gap-4">
          <span className="font-semibold text-gray-800">✨ Features:</span>
          {card.features.map((feature) => (
            <div key={feature.id} className="flex items-center gap-1 text-gray-700">
              <span className="text-green-600">✔</span>
              {feature.details}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default Card;