import type { ReactNode } from "react";

export function StatCard({
  label,
  value,
  trend,
  trendLabel,
  fillPercent = 66,
  accent = "orange",
  icon,
}: {
  label: string;
  value: string;
  trend?: "up" | "down" | "neutral";
  trendLabel?: string;
  fillPercent?: number;
  accent?: "orange" | "teal" | "blue" | "gold" | "slate" | "rose";
  icon?: ReactNode;
}) {
  const accentBar: Record<string, string> = {
    orange: "from-[#c2410c] to-[#ff925c]",
    teal: "from-[#159f8f] to-[#7ce4d0]",
    blue: "from-[#4d9aff] to-[#b7dbff]",
    gold: "from-[#c99a2f] to-[#ffd393]",
    slate: "from-[#697687] to-[#9ea8b0]",
    rose: "from-[#c2410c] to-[#ffc0ba]",
  };

  const trendIcon = trend === "up" ? "↑" : trend === "down" ? "↓" : "→";

  return (
    <div className="admin-stat-card">
      <div className="flex items-start justify-between gap-2">
        <p className="admin-stat-card-label">{label}</p>
        {icon ? (
          <span className={`admin-stat-ic accent-${accent}`} aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
              {icon}
            </svg>
          </span>
        ) : null}
      </div>

      <p className="admin-stat-card-value">{value}</p>

      {trend && trendLabel && (
        <p className="admin-stat-card-trend" data-direction={trend}>
          <span aria-hidden="true">{trendIcon}</span>
          {trendLabel}
        </p>
      )}

      <div className="admin-stat-card-bar mt-3">
        <div
          className={`admin-stat-card-bar-fill bg-gradient-to-r ${accentBar[accent] ?? accentBar.orange}`}
          style={{ width: `${Math.min(100, Math.max(4, fillPercent))}%` }}
        />
      </div>
    </div>
  );
}