interface StatCardProps {
    label: string;
    value: string | number;
    sub?: string;
    accent?: "green" | "red" | "blue" | "purple" | "gold";
    delta?: string;
    deltaUp?: boolean;
}

const accentColors = {
    green:  { val: "text-acid-green",  border: "border-t-acid-green/40" },
    red:    { val: "text-red-400",     border: "border-t-red-500/40" },
    blue:   { val: "text-blue-400",    border: "border-t-blue-400/40" },
    purple: { val: "text-purple-400",  border: "border-t-purple-400/40" },
    gold:   { val: "text-yellow-400",  border: "border-t-yellow-400/40" },
};

export default function StatCard({ label, value, sub, accent = "green", delta, deltaUp }: StatCardProps) {
    const colors = accentColors[accent];
    return (
        <div
            className={`border border-t-2 ${colors.border} rounded-lg p-5 relative group hover:-translate-y-0.5 transition-transform duration-200`}
            style={{ background: "var(--surface)", borderColor: "var(--border)" }}
        >
            <div className="text-xs font-mono tracking-widest uppercase mb-3" style={{ color: "var(--text-secondary)" }}>
                {label}
            </div>
            <div className={`text-4xl font-black tracking-tight ${colors.val} leading-none mb-1`}>
                {value === "—" || value === 0
                    ? <span style={{ color: "var(--text-secondary)" }}>—</span>
                    : value}
            </div>
            {sub && (
                <div className="text-xs font-mono mt-1" style={{ color: "var(--text-secondary)" }}>{sub}</div>
            )}
            {delta && (
                <div className={`absolute top-4 right-4 text-xs font-mono tracking-wider px-2 py-1 rounded-md border ${
                    deltaUp
                        ? "text-acid-green bg-acid-green/10 border-acid-green/30"
                        : "text-red-400 bg-red-500/10 border-red-500/30"
                }`}>
                    {deltaUp ? "▲" : "▼"} {delta}
                </div>
            )}
        </div>
    );
}