import React from "react";
import CampaignCard from "./CampaignCard";
import Nav from "./Nav";

const Campaigns: React.FC = () => {
  const cards = [
    {
      id: "1",
      imageSrc: "/assets/images/interior2.webp",
      title: "Nkpogu Link Road Construction",
      description: "Today is a beautiful day in Bundu-Ama. Sim is working...",
      donations: 262,
      daysToGo: 37,
      amountRaised: "N400,000",
      percentRaised: 400,
    },
    {
      id: "2",
      imageSrc: "/assets/images/interior2.webp",
      title: "Nkpogu Link Road Construction",
      description: "Today is a beautiful day in Bundu-Ama. Sim is working...",
      donations: 262,
      daysToGo: 37,
      amountRaised: "N400,000",
      percentRaised: 400,
    },
    {
      id: "3",
      imageSrc: "/assets/images/interior2.webp",
      title: "Nkpogu Link Road Construction",
      description: "Today is a beautiful day in Bundu-Ama. Sim is working...",
      donations: 262,
      daysToGo: 37,
      amountRaised: "N400,000",
      percentRaised: 400,
    },
    {
      id: "4",
      imageSrc: "/assets/images/interior2.webp",
      title: "Nkpogu Link Road Construction",
      description: "Today is a beautiful day in Bundu-Ama. Sim is working...",
      donations: 262,
      daysToGo: 37,
      amountRaised: "N400,000",
      percentRaised: 400,
    },
    // Add more cards here...
  ];

  return (
    <div className="container">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {cards.map((card, index) => (
          <CampaignCard
            key={index}
            id={card.id}
            imageSrc={card.imageSrc}
            title={card.title}
            description={card.description}
            donations={card.donations}
            daysToGo={card.daysToGo}
            amountRaised={card.amountRaised}
            percentRaised={card.percentRaised}
          />
        ))}
      </div>
    </div>
  );
};

export default Campaigns;