import { Button } from "@/components/ui/button";
import ProgressBar from "../../Shared/ProgressBar";
import Donate from "./Dialogs/Donate";

interface DonationInfoProps {
  title: string;
  currentAmount: number;
  targetAmount: number;
}

const DonationInfo: React.FC<DonationInfoProps> = ({
  title,
  currentAmount,
  targetAmount,
}) => {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <ProgressBar currentAmount={500000000} targetAmount={5000000000} />
        <p className="text-xl font-bold">N{currentAmount}</p>
        <p className="text-sm font-medium text-green-600">
          {(currentAmount / targetAmount) * 100}% raised of N
          {targetAmount.toLocaleString()}
        </p>
      </div>
      <Donate />
    </div>
  );
};

export default DonationInfo;