import * as React from "react";
import MonetizationOnIcon from "@mui/icons-material/MonetizationOn";
import { LatestItem } from "../../components/LatestItems";

const DEFAULT_ICON = React.createElement(MonetizationOnIcon, {
  sx: { color: "#388e3c" }
});

export function mapToLatestItems(
  items: any[],
  type: "expense" | "income"
): LatestItem[] {
  const isValid = (amt: number) =>
    type === "expense" ? amt < 0 : amt > 0;

  return items
    .filter((item: any) => isValid(Number(item.amount) || 0))
    .slice(0, 5)
    .map((exp: any, index: number) => {
      const time = new Date(
        exp.occurred_at || exp.created_at || Date.now()
      ).getTime();

      const diffDays = Math.floor(
        Math.abs(Date.now() - time) / (1000 * 60 * 60 * 24)
      );

      return {
        id: exp.id || index,
        icon: DEFAULT_ICON,
        iconBgColor:
          type === "expense" ? "#ffebee" : "#e8f5e9",
        title: exp.payee?.name || exp.payee || "Unknown Payee",
        subtitle:
          exp.category?.name || exp.account?.name || "Transaction",
        amount: `Rs ${Math.abs(exp.amount || 0)}`,
        timeAgo: diffDays === 0 ? "Today" : `${diffDays} days ago`
      };
    });
}