interface StatCardProps {
  label: string;
  value: string;
  change: string;
  changeDown?: boolean;
}

export default function StatCard({ label, value, change, changeDown }: StatCardProps) {
  return (
    <div className="bg-white border border-mist rounded-md p-5">
      <div className="font-mono text-xs uppercase tracking-widest text-ink-soft mb-2">{label}</div>
      <div className="font-display text-3xl font-semibold text-forest-deep">{value}</div>
      <div className={`text-xs mt-1 ${changeDown ? "text-clay" : "text-forest"}`}>{change}</div>
    </div>
  );
}