import type { LucideIcon } from "lucide-react";

type MetricCardProps = {
  title: string;
  value: string | number;
  unit?: string;
  icon: LucideIcon;
  theme: "dark" | "light";
  accent?: "blue" | "green" | "yellow" | "cyan" | "red";
};

const accentClasses = {
  blue: {
    icon: "text-sky-400",
    bg: "bg-sky-500/10",
    glow: "from-sky-500/20",
  },
  green: {
    icon: "text-emerald-400",
    bg: "bg-emerald-500/10",
    glow: "from-emerald-500/20",
  },
  yellow: {
    icon: "text-yellow-400",
    bg: "bg-yellow-500/10",
    glow: "from-yellow-500/20",
  },
  cyan: {
    icon: "text-cyan-400",
    bg: "bg-cyan-500/10",
    glow: "from-cyan-500/20",
  },
  red: {
    icon: "text-red-400",
    bg: "bg-red-500/10",
    glow: "from-red-500/20",
  },
};

export function MetricCard({
  title,
  value,
  unit,
  icon: Icon,
  theme,
  accent = "blue",
}: MetricCardProps) {
  const isDark = theme === "dark";
  const accentClass = accentClasses[accent];

  return (
    <div
      className={
        isDark
          ? "group relative overflow-hidden rounded-2xl border border-white/10 bg-[#142230] p-5 shadow-[0_16px_40px_rgba(0,0,0,0.22)] transition hover:border-white/20"
          : "group relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-slate-300 hover:shadow-md"
      }
    >
      <div
        className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${accentClass.glow} via-transparent to-transparent opacity-60`}
      />

      <div className="relative flex items-center gap-4">
        <div
          className={`flex h-14 w-14 items-center justify-center rounded-2xl ${accentClass.bg} ${accentClass.icon}`}
        >
          <Icon className="h-8 w-8 stroke-[1.8]" />
        </div>

        <div className="min-w-0 flex-1">
          <p
            className={
              isDark
                ? "mb-2 truncate text-sm font-medium text-slate-300"
                : "mb-2 truncate text-sm font-medium text-slate-600"
            }
          >
            {title}
          </p>

          <div className="flex items-end gap-2">
            <span
              className={
                isDark
                  ? "text-3xl font-bold leading-none tracking-tight text-white"
                  : "text-3xl font-bold leading-none tracking-tight text-slate-950"
              }
            >
              {value}
            </span>

            {unit && (
              <span
                className={
                  isDark
                    ? "mb-1 text-sm font-semibold text-slate-300"
                    : "mb-1 text-sm font-semibold text-slate-600"
                }
              >
                {unit}
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}