"use client";

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

interface Props { label: string; value: string | number; icon: LucideIcon; color?: string }

export default function StatsCard({ label, value, icon: Icon, color = "text-slate-500" }: Props) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 px-5 py-4">
      <div className="flex items-center justify-between mb-2">
        <span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">{label}</span>
        <Icon className={`w-4 h-4 ${color}`} />
      </div>
      <p className="text-2xl font-bold text-slate-900 tabular-nums">{typeof value === "number" ? value.toLocaleString() : value}</p>
    </div>
  );
}
