"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 w-full text-sm">
{/* Top Row: Image + Details */}
<div className="flex flex-col gap-4 p-4">
  <div className="flex flex-col md:flex-row gap-4 items-start w-full relative">

    {/* Column 1: Image + Bank/Card Names */}
    <div className="flex gap-4 items-start w-full md:w-1/2">
      <Image
        src={card.image && card.image.trim() !== "" ? card.image : "/default.webp"}
        alt={card.name || "Card Image"}
        width={120}
        height={120}
        className="object-contain rounded-md"
        priority
      />
      <div>
        <h3 className="text-sm font-semibold text-gray-800">{card.bankname}</h3>
        <p className="text-xs text-gray-600">{card.name}</p>
      </div>
    </div>

    {/* Column 2: Minimum Salary */}
    <div className="w-full md:w-1/4 text-sm">
      <span className="font-semibold text-sm text-gray-700">Minimum Salary</span><br />
      <span className="text-xs text-gray-900">(AED): {card.minSalary}</span>
    </div>

    {/* Column 3: Annual Fee */}
    <div className="w-full md:w-1/4 text-sm">
      <span className="font-semibold text-sm text-gray-700">Annual Fee</span><br />
      <span className="text-xs  text-gray-900">{card.annualFee}</span>
    </div>

    {/* Horizontal line from after image to end of row */}
    <div className="absolute bottom-[-1px] left-[140px] right-0 h-px bg-gray-300" />


  </div>
</div>




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

     {/* Buttons Section (smaller width, same height) */}
    <div className="flex flex-col gap-2 justify-start w-full md:w-auto mt-2 md:mt-6">
      <button className="bg-blue-600 text-white px-4 py-2 text-sm rounded hover:bg-blue-700 transition w-28">
        Apply
      </button>
      <a
        href={`card/${card.id}`}
        className="bg-green-600 text-white px-4 py-2 text-sm rounded hover:bg-red-700 transition w-28 text-center"
      >
        Details
      </a>
    </div>

  </div>
)}

      {/* Features */}
      {card.features && card.features.length > 0 && (
        <div className="mt-0 bg-yellow-100 p-3 rounded-md flex flex-wrap gap-1 w-full">
          <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;