"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 shadow-sm bg-white h-25 overflow-hidden w-full text-sm">
      <div className="flex p-2 gap-4 items-start relative">
        {/* Left Column: Image */}
        <div className="flex-shrink-0">
          <Image
            src={card.image && card.image.trim() !== "" ? card.image : "/default.webp"}
            alt={card.name || "Card Image"}
            width={180}
            height={180}
            className="object-contain rounded-md"
            priority
          />
        </div>

      {/* Right Column: Details */}
<div className="flex-1">
  <div className="flex flex-wrap w-full gap-x-6 gap-y-2 items-start">
    {/* Bank Name & Card Name - full width on mobile, flexible on larger screens */}
    <div className="flex flex-col w-full md:flex-[2]">
      <h3 className="text-sm font-medium text-gray-800 mb-0">{card.bankname}</h3>
      <p className="text-xs text-gray-600 mb-0">{card.name}</p>
    </div>

    {/* Minimum Salary */}
    <div className="flex flex-col w-1/2 md:flex-1">
      <span className="text-sm font-medium text-gray-800">Minimum Salary</span>
      <span className="text-xs text-gray-600 mb-0">(AED): {card.minSalary}</span>
    </div>

    {/* Annual Fee */}
    <div className="flex flex-col w-1/2 md:flex-1">
      <span className="text-sm font-medium text-gray-800">Annual Fee</span>
      <span className="text-xs text-gray-600 mb-0">{card.annualFee}</span>
    </div>
  </div>

  {/* Horizontal line */}
  <div className="block w-full h-px bg-gray-300 mt-2 mb-1" />
</div>
      </div>

      {/* Offers + Buttons Row */}
      {card.offers && card.offers.length > 0 && (
        <div className="flex flex-col md:flex-row justify-between items-start gap-1 pl-44 pt-0">
          {/* Offers Section */}
          <div className="flex-1">
            <div className="flex items-center gap-1 mb-1">
              <span className="text-green-600 font-semibold text-sm">🎁 Offers</span>
            </div>
            <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 list-disc list-inside text-gray-700 text-xs">
              {card.offers.map((offer) => (
                <li key={offer.id}>{offer.details}</li>
              ))}
            </ul>
          </div>

          {/* Buttons Section */}
          <div className="flex flex-col gap-2 w-full md:w-auto mt-0">
            <button 
            className="w-auto md:w-[140px] border border-blue-500 text-center text-blue-500 px-3 py-1 text-sm font-semibold rounded-md hover:bg-blue-500 hover:text-white"

            >
              Apply
            </button>
            <a
              href={`card/${card.id}`}
              className="w-auto md:w-[140px] border border-red-500 text-center  text-red-500 px-3 py-1 text-sm  font-semibold  rounded-md hover:bg-red-500 hover:text-white"
            >
              Details
            </a>
          </div>
        </div>
      )}

      {/* Features Section */}
      {card.features && card.features.length > 0 && (
        <div className="mt-0 bg-yellow-100 p-3 rounded-md flex flex-wrap gap-1 w-full text-xs">
          <span className="font-semibold text-gray-800">✨ Features:</span>
          {card.features.slice(0, 4).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;