"use client";

import { AlertTriangle, ArrowDownRight, ArrowUpRight, DollarSign, Wallet } from "lucide-react";
import { Card } from "@/components/ui/card";
import { currency } from "@/lib/utils";
import { FinanceStats } from "@/types/finance";

interface FinanceStatsCardsProps {
  stats: FinanceStats;
}

export function FinanceStatsCards({ stats }: FinanceStatsCardsProps) {
  const cards = [
    {
      title: "Contas a Receber",
      value: currency(stats.totalReceivable),
      subtext: "Faturamentos e parcelas abertas de locações",
      icon: ArrowUpRight,
      iconBg: "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400",
    },
    {
      title: "Contas a Pagar",
      value: currency(stats.totalPayable),
      subtext: "Despesas com fornecedores e manutenção",
      icon: ArrowDownRight,
      iconBg: "bg-rose-500/10 text-rose-600 dark:bg-rose-500/20 dark:text-rose-400",
    },
    {
      title: "Saldo Projetado",
      value: currency(stats.netProjected),
      subtext: "Entradas menos saídas previstas",
      icon: Wallet,
      iconBg: "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400",
    },
    {
      title: "Valores em Atraso",
      value: currency(stats.overdueAmount),
      subtext: "Títulos vencidos aguardando cobrança",
      icon: AlertTriangle,
      iconBg: "bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400",
    },
  ];

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {cards.map((card) => {
        const Icon = card.icon;
        return (
          <Card key={card.title} className="p-4 shadow-xs border">
            <div className="flex items-start justify-between">
              <div>
                <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                  {card.title}
                </p>
                <h3 className="mt-2 text-2xl font-bold tracking-tight">
                  {card.value}
                </h3>
              </div>
              <div className={`rounded-xl p-2.5 ${card.iconBg}`}>
                <Icon className="h-5 w-5" />
              </div>
            </div>
            <p className="mt-3 text-xs text-muted-foreground">{card.subtext}</p>
          </Card>
        );
      })}
    </div>
  );
}