import { Avatar, AvatarFallback } from "@/components/ui/avatar"

interface VendaRecente {
  id: string
  valor_centavos: number
  created_at: string
  metodo_pagamento: string | null
  clientes: { nome: string; email: string } | null
  produtos: { nome: string } | null
}

export function RecentSales({ vendas }: { vendas: VendaRecente[] }) {
  if (vendas.length === 0) {
    return (
      <p className="text-sm text-muted-foreground text-center py-4">
        Nenhuma venda confirmada ainda.
      </p>
    )
  }

  return (
    <div className="space-y-6">
      {vendas.map((v) => {
        const initials = (v.clientes?.nome ?? "?")
          .split(" ")
          .slice(0, 2)
          .map((n) => n[0])
          .join("")
          .toUpperCase()

        return (
          <div key={v.id} className="flex items-center gap-4">
            <Avatar className="h-9 w-9">
              <AvatarFallback className="text-xs">{initials}</AvatarFallback>
            </Avatar>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium leading-none truncate">
                {v.clientes?.nome ?? "—"}
              </p>
              <p className="text-xs text-muted-foreground truncate mt-0.5">
                {v.produtos?.nome ?? "—"}
              </p>
            </div>
            <div className="text-right shrink-0">
              <p className="text-sm font-semibold">
                {(v.valor_centavos / 100).toLocaleString("pt-BR", {
                  style: "currency",
                  currency: "BRL",
                })}
              </p>
              <p className="text-xs text-muted-foreground">
                {new Date(v.created_at).toLocaleDateString("pt-BR")}
              </p>
            </div>
          </div>
        )
      })}
    </div>
  )
}