asaas-checkout/components/dashboard-stats.tsx

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DollarSign, Users, ShoppingCart, TrendingUp } from "lucide-react"

interface DashboardStatsProps {
  receitaTotal: number
  totalPedidosConfirmados: number
  ticketMedio: number
  pedidosPendentes: number
}

export function DashboardStats({
  receitaTotal,
  totalPedidosConfirmados,
  ticketMedio,
  pedidosPendentes,
}: DashboardStatsProps) {
  const fmt = (v: number) =>
    v.toLocaleString("pt-BR", { style: "currency", currency: "BRL" })

  const stats = [
    {
      title: "Receita Total",
      value: fmt(receitaTotal),
      icon: DollarSign,
      description: "Pedidos pagos (todos os tempos)",
    },
    {
      title: "Vendas Confirmadas",
      value: totalPedidosConfirmados.toString(),
      icon: ShoppingCart,
      description: "Pedidos recebidos ou confirmados",
    },
    {
      title: "Ticket Médio",
      value: fmt(ticketMedio),
      icon: TrendingUp,
      description: "Por venda confirmada",
    },
    {
      title: "Pendentes",
      value: pedidosPendentes.toString(),
      icon: Users,
      description: "Aguardando pagamento",
    },
  ]

  return (
    <>
      {stats.map((stat, index) => (
        <Card key={index}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="font-heading text-sm font-medium">{stat.title}</CardTitle>
            <stat.icon className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="font-sans text-2xl font-bold">{stat.value}</div>
            <p className="font-sans text-xs text-muted-foreground">{stat.description}</p>
          </CardContent>
        </Card>
      ))}
    </>
  )
}