import { StatCardProps } from "@/constants/types";
import { colorMap } from "@/constants/constant";

export default function StatCard({
  title,
  value,
  variant = "progress",
  subtitle,
  progress,
  color = "teal",
  icon: Icon,
  badgeText,
  badgeClassName = "text-slate-500 font-mono uppercase",
  iconContainerClassName = "bg-[#11233a] border-[#1b2c3f]/50 text-cyan-400",
  isActiveCard = false,
}: StatCardProps) {
  
  // Base structural classes matched exactly to your dark UI design
  const cardBorder = isActiveCard ? "border-[#0d9488]" : "border-[#142538]";
  
  return (
    <div className={`relative rounded-2xl border ${cardBorder} bg-[#091624] p-5 flex flex-col justify-between min-h-[142px] w-full transition-all duration-300`}>
      
      {/* --- TOP HEADER SECTION --- */}
      <div className="flex items-center justify-between w-full">
        {variant === "icon" && Icon ? (
          <div className={`flex h-9 w-9 items-center justify-center rounded-lg border ${iconContainerClassName}`}>
            <Icon size={18} />
          </div>
        ) : (
          <span className="text-xs font-bold uppercase tracking-wider text-slate-400/80">
            {title}
          </span>
        )}

        {badgeText && (
          <span className={`text-[10px] font-semibold tracking-wider ${badgeClassName}`}>
            {badgeText}
          </span>
        )}
      </div>

      {/* --- BODY STATS SECTION --- */}
      <div className="mt-4 flex-grow flex flex-col justify-end">
        <div className="text-3xl font-extrabold text-white tracking-tight leading-none">
          {value}
        </div>
        
        {/* Subtitle / Bottom Label text arrangement layout swap */}
        <p className="text-xs font-semibold text-slate-400/70 mt-2">
          {variant === "icon" ? title : subtitle}
        </p>
      </div>

      {/* --- PROGRESS LAYER (Only renders if variant="progress") --- */}
      {variant === "progress" && progress !== undefined && (
        <div className="w-full bg-[#162a45] h-1.5 rounded-full mt-3 overflow-hidden">
          <div
            className={`h-1.5 rounded-full ${colorMap[color] || 'bg-teal-500'} transition-all duration-500`}
            style={{ width: `${progress}%` }}
          />
        </div>
      )}
    </div>
  );
}