import { cn } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";

export interface MetricCardProps {
  title: string;
  value: string | number;
  change?: string | number;
  changeType?: "positive" | "negative" | "neutral";
  icon?: LucideIcon;
  suffix?: string;
  className?: string;
}

export function MetricCard({
  title,
  value,
  change,
  changeType = "neutral",
  icon: Icon,
  suffix,
  className,
}: MetricCardProps) {
  const changeColorClass = {
    positive: "text-[#00ffcc]",
    negative: "text-[#ff5252]",
    neutral: "text-[#a0a0a0]",
  }[changeType];

  return (
    <div
      className={cn(
        "bg-[#1e1e1e] border border-[#2c2c2c] rounded-xl p-6",
        "hover:border-[#00ffcc]/30 transition-all duration-300 group",
        "h-full flex flex-col",
        className,
      )}
    >
      <div className="flex items-start justify-between flex-1">
        <div className="flex-1 flex flex-col">
          <p className="text-[#666666] text-[10px] font-black uppercase tracking-widest mb-2 group-hover:text-[#a0a0a0] transition-colors">
            {title}
          </p>
          <div className="flex items-baseline gap-1">
            <span className="text-[#e1e1e1] text-2xl font-black tracking-tight">
              {value}
            </span>
            {suffix && (
              <span className="text-[#666666] text-xs font-bold">{suffix}</span>
            )}
          </div>
          {/* Reserve space for change indicator - always render container */}
          <div className="h-5 mt-2">
            {change !== undefined && (
              <p
                className={cn(
                  "text-xs font-black uppercase italic tracking-tighter",
                  changeColorClass,
                )}
              >
                {changeType === "positive" && "↑"}
                {changeType === "negative" && "↓"}
                {change}
              </p>
            )}
          </div>
        </div>
        {Icon && (
          <div className="p-3 bg-[#2c2c2c]/30 rounded-xl group-hover:bg-[#00ffcc]/10 transition-colors shrink-0">
            <Icon className="w-5 h-5 text-[#00ffcc]" />
          </div>
        )}
      </div>
    </div>
  );
}

export const StatCard = MetricCard;
