"use client";

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

interface CardProps {
  id: string;
  imageSrc: string;
  title: string;
  description: string;
  donations: number;
  daysToGo: number;
  amountRaised: string;
  percentRaised: number;
}

const CampaignCard: React.FC<CardProps> = ({
  id,
  imageSrc,
  title,
  description,
  donations,
  daysToGo,
  amountRaised,
  percentRaised,
}) => {
  return (
    <div className="border rounded-lg overflow-hidden">
      <div className="flex relative flex-col item-start">
        <Image
          width={500}
          height={500}
          src={imageSrc}
          alt={title}
          className="w-full h-40 rounded-t-lg object-cover"
        />
        <div className="bg-black/60 text-white p-1 top-0 left-0 rounded-tl-md absolute">
          <p className="text-sm font-semibold">{daysToGo}</p>
          <p className="text-xs text-neutral-200">Days To Go</p>
        </div>
        <div className="bg-black/60 text-white p-1 top-0 right-0 rounded-tl-md absolute">
          <p className="text-sm font-semibold">{donations}</p>
          <p className="text-xs text-neutral-200">Donations</p>
        </div>
      </div>
      <div className="bg-black top-2 left-2 text-white p-1 space-x-1 flex items-center abolute">
        <p className="text-sm font-semibold">{amountRaised}</p>
        <p className="text-xs text-green-400">{percentRaised}% Raised</p>
      </div>
      <div className="pt-3 px-4 pb-4 relative">
        <Link href={`/campaigns/${id}`} className="hover:underline">
          <h5 className="">{title}</h5>
        </Link>
        <p className="text-sm text-gray-600 mt-2">{description}</p>
      </div>
    </div>
  );
};

export default CampaignCard;