openmonetis/components/dashboard/recurring-expenses-widget.tsx

import MoneyValues from "@/components/money-values";
import { CardContent } from "@/components/ui/card";
import type { RecurringExpensesData } from "@/lib/dashboard/expenses/recurring-expenses";
import { RiRefreshLine } from "@remixicon/react";
import { WidgetEmptyState } from "../widget-empty-state";

type RecurringExpensesWidgetProps = {
  data: RecurringExpensesData;
};

const formatOccurrences = (value: number | null) => {
  if (!value) {
    return "Recorrência contínua";
  }

  return `${value} recorrências`;
};

export function RecurringExpensesWidget({
  data,
}: RecurringExpensesWidgetProps) {
  if (data.expenses.length === 0) {
    return (
      <WidgetEmptyState
        icon={<RiRefreshLine className="size-6 text-muted-foreground" />}
        title="Nenhuma despesa recorrente"
        description="Lançamentos recorrentes aparecerão aqui conforme forem registrados."
      />
    );
  }

  return (
    <CardContent className="flex flex-col gap-4 px-0">
      <ul className="flex flex-col gap-2">
        {data.expenses.map((expense) => {
          return (
            <li
              key={expense.id}
              className="flex items-start gap-3 border-b border-dashed pb-2 last:border-b-0 last:pb-0"
            >
              <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
                <RiRefreshLine className="size-5 text-foreground" />
              </div>

              <div className="min-w-0 flex-1">
                <div className="flex items-center justify-between gap-2">
                  <p className="truncate text-foreground text-sm font-medium">
                    {expense.name}
                  </p>

                  <MoneyValues amount={expense.amount} />
                </div>

                <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                  <span className="inline-flex items-center gap-1">
                    {expense.paymentMethod}
                  </span>
                  -<span>{formatOccurrences(expense.recurrenceCount)}</span>
                </div>
              </div>
            </li>
          );
        })}
      </ul>
    </CardContent>
  );
}