"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";

export default function DonationCard({ data }: any) {
  const router = useRouter();
  const { language } = useLanguage();
  const t = getTranslation(language).donationCard;

  const percent =
    data.progressPercent !== undefined
      ? Math.min(Number(data.progressPercent), 100)
      : Math.min((Number(data.raised) / Number(data.target)) * 100, 100);

  // Format number in Indian numbering system
  const formatINR = (value: number) => {
    return new Intl.NumberFormat("en-IN").format(value);
  };

  return (
    <div
      onClick={() => router.push(`/donate/${data.id}`)}
      className="bg-white rounded-3xl shadow-lg overflow-hidden cursor-pointer hover:shadow-xl transition-shadow duration-300"
    >
      <div className="relative">
        <Image
          src={data?.image}
          alt={data.title}
          width={800}
          height={400}
          className="w-full h-[200px]"
        />
      </div>

      <div className="p-5">
        <h3 className="text-lg font-semibold mb-4 text-gray-900">{data.title}</h3>

        {/* Progress Indicator */}
        <div className="bg-gray-100 rounded-lg px-4 py-3 mb-4">
          <p className="text-sm text-gray-700">
            <span className="font-semibold text-gray-900">₹{formatINR(Number(data.raised))}</span>
            <span className="text-gray-500"> {t.of} </span>
            <span className="font-semibold text-gray-900">₹{formatINR(Number(data.target))}</span>
            <span className="text-gray-500"> {t.collected}</span>
          </p>
        </div>

        {/* Progress Bar */}
        <div className="w-full bg-gray-200 rounded-full h-2.5 mb-4">
          <div
            className="bg-gradient-to-r from-[#FAA631] to-[#E6952B] h-2.5 rounded-full transition-all duration-300"
            style={{ width: `${percent}%` }}
          />
        </div>

        {/* Stats Row */}
        <div className="flex justify-between text-sm text-gray-600 mb-5">
          <span className="font-medium">👥 {Number(data.backers)} {t.supporters}</span>
          {data.daysLeft > 0 && (
            <span className="font-medium">⏳ {data.daysLeft} {t.daysLeft}</span>
          )}
        </div>

        {/* Support Button */}
        <button className="w-full bg-gradient-to-r from-[#FAA631] to-[#E6952B] text-white py-3 rounded-xl font-semibold hover:shadow-lg hover:shadow-[#FAA631]/30 transition-all duration-300">
          {t.viewDetails}
        </button>
      </div>
    </div>
  );
}