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

// Interface for individual feature card
interface FeatureCard {
  id: string | number;
  imageUrl: string;
  imageAlt: string;
  title: string;
  description: string;
}

// Interface for the whole section
interface FeatureCardSectionProps {
  titleColoredText: string;
  titleBoldText: string;
  description: string;
  cards: FeatureCard[];
  gridColumns?: 1 | 2 | 3 | 4; // Number of columns in the grid
  className?: string;
}

const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
  titleColoredText,
  titleBoldText,
  description,
  cards,
  gridColumns = 3,
  className,
}) => {
  // Determine grid columns class
  const gridClass = {
    1: "grid-cols-1",
    2: "grid-cols-1 md:grid-cols-2",
    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
  }[gridColumns];

  return (
    <section className={`feature-card-section ${className || ""}`}>
      <div className="w-10/12 mx-auto py-16">
        <div className="max-w-[750px] mx-auto mb-10">
          <div className="text-center">
            <span className="text-[#6a47ed] text-center text-2xl md:text-5xl font-light font-['Inter'] leading-[28px] md:leading-[48px]">
              {titleColoredText}
            </span>
            <span className="text-[#434343] text-center text-2xl md:text-5xl font-bold font-['Inter'] leading-[28px] md:leading-[48px]">
              {" " + titleBoldText}
            </span>
          </div>
          <div className="max-w-[750px] mt-4 text-center text-[#9b97bb] text-sm md:text-base font-normal font-['Inter'] leading-normal">
            {description}
          </div>
        </div>

        <div className={`grid ${gridClass} gap-6 justify-center`}>
          {cards.map((card) => (
            <div
              key={card.id}
              className="marketing-card w-full max-w-[404px] h-[400px] md:h-[450px] bg-white rounded-[20px] border border-[#ebebeb] mx-auto"
            >
              <div className="shadow-md rounded-3xl flex justify-center m-2 h-48 md:h-64 overflow-hidden">
                <Image
                  src={card.imageUrl}
                  alt={card.imageAlt}
                  width={360}
                  height={480}
                  className="h-full w-full"
                />
              </div>
              <div className="text-[#252525] w-[90%] mx-auto mt-[20px] text-2xl font-semibold font-['Inter']">
                {card.title}
              </div>
              <div className="w-[90%] h-[93px] mx-auto my-5 text-[#aaaaaa] text-sm font-normal font-['Inter'] leading-[21px]">
                {card.description}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default FeatureCardSection;