import React from "react";
import { Card } from "./ui/card";

export const StatCard = ({
  title,
  value,
  icon: Icon,
  iconBgClass,
  dataTestId,
}) => {
  const valueString = value == null ? "" : String(value);

  const digitCount =
    valueString.replace(/\D/g, "").length || valueString.length;

  const getValueFontSize = () => {
    switch (true) {
      case digitCount <= 2:
        // 3.75rem for 3 or fewer digits
        return "3.75rem";
      case digitCount <= 6:
        // Scale down for more digits
        return "clamp(2rem, 5cqi, 3rem)";
      case digitCount <= 9:
        return "clamp(1.5rem, 4cqi, 2.5rem)";
      default:
        return "clamp(1.25rem, 3cqi, 2rem)";
    }
  };
  const valueFontSize = getValueFontSize();

  return (
    <Card
      className="p-6 flex flex-col justify-between bg-background rounded-2xl border border-[var(--neutral-800)]"
      data-testid={dataTestId}
    >
      <div className="flex items-start gap-4 mb-4 justify-between">
        <div
          className="space-y-8 "
          style={{
            containerType: "inline-size",
            maxWidth: "200px",
            width: "100%",
          }}
        >
          <p
            className="font-semibold text-[var(--purple-ink)] mb-1"
            style={{ fontSize: valueFontSize, lineHeight: 1 }}
          >
            {value}
          </p>
        </div>

        <div className={`${iconBgClass} px-3 py-2 rounded-lg `}>
          <Icon className="size-[valueFontSize]" />
        </div>
      </div>
      <p
        className="text-sm text-brand-purple "
        style={{ fontFamily: "'Nunito Sans', sans-serif" }}
      >
        {title}
      </p>
    </Card>
  );
};