import Image from 'next/image';

const CardListMobile = ({ cards }) => (
  <div className="flex flex-wrap gap-3 justify-center">
    {cards.map((card) => (
      <div
        key={card.id}
        className="bg-white shadow-md rounded-lg p-3 flex flex-col justify-between w-full"
      >
        <div className="flex gap-4 items-start">
          <Image
            src={card.imgSrc}
            width={80}
            height={80}
            alt={card.title}
            className="rounded-lg object-contain h-20 w-20"
          />
          <div>
            <h5 className="text-md font-semibold">{card.title}</h5>
            <ul className="text-sm text-gray-700 mt-1 pl-4 list-disc">
              {card.points.map((point, i) => (
                <li key={i}>{point}</li>
              ))}
            </ul>
          </div>
        </div>
        <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 CardListMobile;