import Image from 'next/image';

const CardListDesktop = ({ cards }) => (
  <div className="flex justify-center gap-4 flex-wrap">
    {cards.map((card) => (
      <div
        key={card.id}
        className="bg-white shadow-md rounded-lg p-4 flex flex-col justify-between transition-all
        w-[calc(100%/5-1rem)]"
      >
        <Image
          src={card.imgSrc}
          width={300}
          height={180}
          alt={card.title}
          className="rounded-lg w-full object-contain h-32"
        />
        <h5 className="text-md font-semibold text-center mt-2">{card.title}</h5>
        <ul className="text-sm text-gray-700 mt-2 pl-4 list-disc">
          {card.points.map((point, i) => (
            <li key={i}>{point}</li>
          ))}
        </ul>
        <div className="flex justify-between mt-4">
          <a
            href={`card/${card.id}`}
            className="border border-blue-500 text-blue-500 px-3 py-1 text-sm rounded-md hover:bg-blue-500 hover:text-white"
          >
            Know More
          </a>
          <a
            href="#"
            className="border border-red-500 text-red-500 px-3 py-1 text-sm rounded-md hover:bg-red-500 hover:text-white"
          >
            Apply Now
          </a>
        </div>
      </div>
    ))}
  </div>
);

export default CardListDesktop;