import { ArrowDownRight, ArrowUpRight, LucideIcon, Minus } from "lucide-react";
import React from "react";

interface StatCardProps {
  label: string;
  value: string;
  icon: LucideIcon;
  trend?: "up" | "down" | "neutral";
  change?: string;
}

const StatCard: React.FC<StatCardProps> = ({ label, value, icon: Icon, trend, change }) => {
  return (
    <div data-cmp="StatCard" className="bg-card border border-border rounded-xl p-6 shadow-sm">
      <div className="flex items-center justify-between mb-4">
        <span className="text-sm font-medium text-muted-foreground">{label}</span>
        <div className="p-2 bg-muted rounded-full">
          <Icon className="w-4 h-4 text-foreground" />
        </div>
      </div>
      <div className="flex items-baseline flex-wrap space-x-2">
        <h2 className="text-3xl font-bold text-foreground">{value}</h2>
        {change && (
          <span
            className={`flex items-center text-xs font-medium whitespace-nowrap ${
              trend === "up" ? "text-green-600" : trend === "down" ? "text-red-500" : "text-muted-foreground"
            }`}
          >
            {trend === "up" && <ArrowUpRight className="w-3 h-3 mr-1" />}
            {trend === "down" && <ArrowDownRight className="w-3 h-3 mr-1" />}
            {trend === "neutral" && <Minus className="w-3 h-3 mr-1" />}
            {change}
          </span>
        )}
      </div>
    </div>
  );
};

export default StatCard;