import type { ReactNode } from "react";
import MetricTooltip from "./MetricTooltip";

interface CoverageSummaryCardProps {
  title: string;
  value: number;
  total?: number;
  icon: ReactNode;
  colorClass: string;
  bgClass: string;
  /** Optional tooltip explaining this metric to non-technical users */
  tooltip?: { description: string; context?: string };
}

export default function CoverageSummaryCard({
  title,
  value,
  total,
  icon,
  colorClass,
  bgClass,
  tooltip,
}: CoverageSummaryCardProps) {
  const percentage = total && total > 0 ? ((value / total) * 100).toFixed(1) : null;

  return (
    <div className={`rounded-xl border border-gray-800 ${bgClass} p-5`}>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-400 flex items-center">
            {title}
            {tooltip && (
              <MetricTooltip
                title={title}
                description={tooltip.description}
                context={tooltip.context}
              />
            )}
          </p>
          <p className={`mt-1 text-3xl font-bold ${colorClass}`}>{value}</p>
          {percentage !== null && (
            <p className="mt-1 text-xs text-gray-500">{percentage}% of total</p>
          )}
        </div>
        <div className={`rounded-lg p-3 ${bgClass} border border-gray-700`}>
          {icon}
        </div>
      </div>
    </div>
  );
}