"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";

export function StatCard({
  title,
  value,
  icon: Icon,
  gradient,
  href,
  zeroHint,
}: {
  title: string;
  value: string | number;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  gradient: string;
  href: string;
  zeroHint?: { text: string; href: string };
}) {
  const router = useRouter();
  return (
    <Link href={href} className="group">
      <div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition-all duration-300 group-hover:scale-[1.02] min-h-[116px] flex">
        <div className="p-6 flex-1">
          <div className="flex items-center">
            <div className={`flex-shrink-0 p-3 rounded-xl bg-gradient-to-r ${gradient}`}>
              <Icon className="h-6 w-6 text-white" />
            </div>
            <div className="ml-4 flex-1">
              <p className="text-sm font-medium text-gray-600 uppercase tracking-wide">{title}</p>
              <p className="text-2xl font-bold text-gray-900 mt-1">{value}</p>
              {Number(value) === 0 && zeroHint ? (
                <span
                  onClick={e => {
                    // Prevent card navigation if clicking the hint
                    e.preventDefault();
                    e.stopPropagation();
                    router.push(zeroHint.href);
                  }}
                  className="mt-1 inline-flex items-center text-xs font-medium text-blue-600 hover:text-blue-700 cursor-pointer"
                >
                  {zeroHint.text} →
                </span>
              ) : null}
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}
