type Props = {
  title: string;
  value: string | number;
  subtitle: string;
};

export default function StatCard({ title, value, subtitle }: Props) {
  return (
    <div className="rounded-3xl border border-slate-800 bg-slate-950/80 p-6 shadow-lg shadow-slate-900/10 hover:border-slate-700 transition-colors group">
      <div className="text-[10px] uppercase tracking-[0.3em] font-bold text-slate-500 group-hover:text-cyan transition-colors">{title}</div>
      <div className="mt-4 text-3xl xl:text-4xl font-bold text-white tracking-tight truncate">
        {value}
      </div>
      <p className="mt-2 text-xs font-medium text-slate-400">{subtitle}</p>
    </div>
  );
}