"use client";

interface DonationProgressProps {
  raised: number;
  target: number;
  backers: number;
  daysLeft: number;
}

export default function DonationProgress({
  raised,
  target,
  backers,
  daysLeft,
}: DonationProgressProps) {
  const percent = Math.min(Math.round((raised / target) * 100), 100);

  return (
    <div className="space-y-3">
      {/* Raised / Target */}
      <div className="flex justify-between items-center text-sm">
        <span className="text-green-600 font-semibold">
          ${raised.toLocaleString()} Raised
        </span>
        <span className="text-gray-500">
          ${target.toLocaleString()}
        </span>
      </div>

      {/* Progress Bar */}
      <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
        <div
          className="bg-green-500 h-2 rounded-full transition-all duration-500"
          style={{ width: `${percent}%` }}
        />
      </div>

      {/* Meta */}
      <div className="flex justify-between text-sm text-gray-600">
        <div className="flex items-center gap-1">
          👥 <span>{backers.toLocaleString()} Backers</span>
        </div>

        <div className="flex items-center gap-1">
          ⏳ <span>{daysLeft} Days Left</span>
        </div>
      </div>
    </div>
  );
}