"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { TrendingUp, TrendingDown, ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

interface StatsSummaryCardsProps {
  totalIncome: number;
  totalExpenses: number;
  avgMonthlyExpenses: number;
  formatCurrency: (amount: number) => string;
}

export function StatsSummaryCards({
  totalIncome,
  totalExpenses,
  avgMonthlyExpenses,
  formatCurrency,
}: StatsSummaryCardsProps) {
  const savings = totalIncome - totalExpenses;

  return (
    <div className="grid gap-3 md:gap-4 grid-cols-2 md:grid-cols-4">
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground flex items-center gap-1.5 md:gap-2">
            <TrendingUp className="w-3 h-3 md:w-4 md:h-4 text-emerald-600" />
            Total Revenus
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-lg md:text-2xl font-bold text-emerald-600">
            {formatCurrency(totalIncome)}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground flex items-center gap-1.5 md:gap-2">
            <TrendingDown className="w-3 h-3 md:w-4 md:h-4 text-red-600" />
            Total Dépenses
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-lg md:text-2xl font-bold text-red-600">
            {formatCurrency(totalExpenses)}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground flex items-center gap-1.5 md:gap-2">
            <ArrowRight className="w-3 h-3 md:w-4 md:h-4" />
            Moyenne mensuelle
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-lg md:text-2xl font-bold">
            {formatCurrency(avgMonthlyExpenses)}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
            Économies
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div
            className={cn(
              "text-lg md:text-2xl font-bold",
              savings >= 0 ? "text-emerald-600" : "text-red-600",
            )}
          >
            {formatCurrency(savings)}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}