import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { TrendingUp, TrendingDown } from 'lucide-react';

/**
 * Grid de KPIs compartilhada.
 */
export const StatsGrid = ({ stats }) => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {stats.map((stat, index) => (
        <Card key={index} className="overflow-hidden border-none shadow-sm bg-card hover:shadow-md transition-all">
          <CardContent className="p-6">
            <div className="flex items-start justify-between">
              <div className="space-y-1">
                <p className="text-sm font-medium text-muted-foreground">{stat.label}</p>
                <div className="flex items-baseline gap-2">
                  <h3 className="text-2xl font-bold tracking-tight">{stat.value}</h3>
                  {stat.trend && (
                    <span className={cn(
                      "text-xs font-bold flex items-center gap-0.5 px-1.5 py-0.5 rounded",
                      stat.negative ? "text-destructive bg-destructive/10" : "text-emerald-600 bg-emerald-100/50"
                    )}>
                      {stat.negative ? <TrendingDown size={12} /> : <TrendingUp size={12} />}
                      {stat.trend}
                    </span>
                  )}
                </div>
              </div>
              {stat.icon && (
                <div className={cn("p-2.5 rounded-xl", stat.color || "bg-primary/10 text-primary")}>
                  {React.cloneElement(stat.icon, { size: 24 })}
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
};