import { TrendingUp, TrendingDown } from "lucide-react";

interface MetricCardProps {
  label: string;
  value: string;
  change?: string | null;
  changePositive?: boolean | null;
}

export default function MetricCard({ label, value, change, changePositive }: MetricCardProps) {
  return (
    <div className="bg-white border border-slate-100 rounded-xl p-4 hover:shadow-md transition-all">
      <p className="text-xs text-slate-500 font-medium mb-1">{label}</p>
      <p className="text-2xl font-bold text-slate-900 mb-1">{value}</p>
      {change && (
        <div className={`flex items-center gap-1 text-xs font-semibold ${changePositive ? "text-green-600" : "text-red-500"}`}>
          {changePositive ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
          {change}
        </div>
      )}
    </div>
  );
}