/**
 * components/dashboard/StatsCard.tsx
 * Professional stats card for the dashboard overview.
 */

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

interface StatsCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon: LucideIcon;
  trend?: { value: number; label: string };
  variant?: "default" | "dark";
}

export function StatsCard({
  title,
  value,
  subtitle,
  icon: Icon,
  trend,
  variant = "default",
}: StatsCardProps) {
  const isDark = variant === "dark";

  return (
    <div
      className={clsx(
        "rounded-[2rem] p-7 transition-all duration-500 group relative overflow-hidden",
        isDark
          ? "bg-slate-900 text-white shadow-2xl shadow-indigo-500/10"
          : "bg-white border border-slate-100 text-slate-900 shadow-xl shadow-black/[0.02] hover:border-indigo-600",
      )}
    >
      <div className="flex items-start justify-between mb-8">
        <div
          className={clsx(
            "flex h-12 w-12 items-center justify-center rounded-2xl transition-transform group-hover:scale-110",
            isDark ? "bg-white/10" : "bg-slate-50 border border-slate-100",
          )}
        >
          <Icon
            className={clsx("h-5 w-5", isDark ? "text-white" : "text-black")}
          />
        </div>
        {trend && (
          <span
            className={clsx(
              "flex items-center gap-1 text-[9px] font-black uppercase tracking-widest rounded-full px-3 py-1.5",
              trend.value >= 0
                ? "bg-emerald-50 text-emerald-700"
                : "bg-red-50 text-red-600",
            )}
          >
            {trend.value >= 0 ? "+" : "-"} {Math.abs(trend.value)}%
          </span>
        )}
      </div>

      <div>
        <p
          className={clsx(
            "text-[9px] font-black uppercase tracking-[0.2em] mb-2",
            isDark ? "text-slate-500" : "text-slate-300",
          )}
        >
          {title}
        </p>
        <p
          className={clsx(
            "text-2xl md:text-3xl font-jakarta font-black tracking-tight",
            isDark ? "text-white" : "text-black",
          )}
        >
          {value}
        </p>
        {subtitle && (
          <p
            className={clsx(
              "text-[9px] font-bold mt-2 uppercase tracking-tight",
              isDark ? "text-slate-400" : "text-slate-400",
            )}
          >
            {subtitle}
          </p>
        )}
      </div>

      {/* Decorative background element */}
      <Icon
        className={clsx(
          "absolute -bottom-4 -right-4 h-24 w-24 opacity-[0.03] transition-transform duration-700 group-hover:scale-125",
          isDark ? "text-white" : "text-black",
        )}
      />
    </div>
  );
}