"use client";

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

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

export function TopExpensesList({
  expenses,
  categories,
  formatCurrency,
}: TopExpensesListProps) {
  const isMobile = useIsMobile();

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