"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CategoryIcon } from "@/components/ui/category-icon";
import type { Transaction, Category } from "@/lib/types";

interface TopExpensesListProps {
  expenses: Transaction[];
  categories: Category[];
  formatCurrency: (amount: number) => string;
}

export function TopExpensesList({
  expenses,
  categories,
  formatCurrency,
}: TopExpensesListProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Top 5 dépenses</CardTitle>
      </CardHeader>
      <CardContent>
        {expenses.length > 0 ? (
          <div className="space-y-4">
            {expenses.map((expense, index) => {
              const category = categories.find(
                (c) => c.id === expense.categoryId
              );
              return (
                <div key={expense.id} className="flex items-center gap-3">
                  <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center text-sm font-semibold">
                    {index + 1}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-sm truncate">
                      {expense.description}
                    </p>
                    <div className="flex items-center gap-2">
                      <span className="text-xs text-muted-foreground">
                        {new Date(expense.date).toLocaleDateString("fr-FR")}
                      </span>
                      {category && (
                        <span
                          className="text-xs px-1.5 py-0.5 rounded inline-flex items-center gap-1"
                          style={{
                            backgroundColor: `${category.color}20`,
                            color: category.color,
                          }}
                        >
                          <CategoryIcon
                            icon={category.icon}
                            color={category.color}
                            size={10}
                          />
                          {category.name}
                        </span>
                      )}
                    </div>
                  </div>
                  <div className="text-red-600 font-semibold tabular-nums">
                    {formatCurrency(expense.amount)}
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="h-[200px] flex items-center justify-center text-muted-foreground">
            Pas de dépenses pour cette période
          </div>
        )}
      </CardContent>
    </Card>
  );
}