/**
 * StatCard
 * --------
 * A small summary card that shows a label, a big number, and a
 * coloured change badge underneath.
 *
 * Props:
 *   label   – the card title shown in small caps  (e.g. "SEO Score")
 *   value   – the main number or text to display  (e.g. "74")
 *   unit    – optional suffix after the value     (e.g. "/100")
 *   change  – small note about trend              (e.g. "+3 this week")
 *   positive – true = green badge, false = red badge
 *   icon    – a Lucide icon component to show in the top-right corner
 */

import { LucideIcon } from "lucide-react";

interface StatCardProps {
  label: string;
  value: string;
  unit?: string;
  change: string;
  positive?: boolean;
  icon: LucideIcon;
  iconColor?: string;
}

export function StatCard({
  label,
  value,
  unit,
  change,
  positive = true,
  icon: Icon,
  iconColor = "text-brand-600",
}: StatCardProps) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 p-5 flex flex-col gap-3">
      {/* Top row: label + icon */}
      <div className="flex items-center justify-between">
        <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
          {label}
        </p>
        <span className={`${iconColor} opacity-70`}>
          <Icon className="w-4 h-4" />
        </span>
      </div>

      {/* Main number */}
      <p className="text-3xl font-bold text-slate-900 leading-none">
        {value}
        {unit && (
          <span className="text-sm font-normal text-slate-400 ml-1">{unit}</span>
        )}
      </p>

      {/* Change badge */}
      <p
        className={`text-xs font-medium ${
          positive ? "text-green-600" : "text-red-500"
        }`}
      >
        {change}
      </p>
    </div>
  );
}
