import { memo, useMemo } from "react";
import { CashWithdrawal } from "@/components/datatable/listcashwithdrawal/columns";
import { RecordModal, formatDisplay, formatNumeric } from "@/components/cash/RecordModal";

interface CashWithdrawalModalProps {
  record: CashWithdrawal;
  onClose: () => void;
  onEdit: () => void;
}

export const CashWithdrawalModal = memo(({
  record,
  onClose,
  onEdit,
}: CashWithdrawalModalProps) => {
  const amountColor = useMemo(() => {
    const dType = record.d_type?.toLowerCase() || "";
    if (dType.includes("withdrawal")) {
      return "text-red-600";
    }
    if (dType.includes("deposit")) {
      return "text-green-600";
    }
    return "";
  }, [record.d_type]);

  const metrics = useMemo(
    () => [
      {
        label: "Amount",
        value: formatNumeric(record.amount),
        colorClass: amountColor,
      },
      {
        label: "Currency",
        value: formatDisplay(record.purchase_currency_code),
      },
      {
        label: "Transaction Type",
        value: formatDisplay(record.d_type),
      },
    ],
    [record.amount, record.purchase_currency_code, record.d_type, amountColor]
  );

  const detailItems = useMemo(
    () => [
      { label: "Placement Date", value: formatDisplay(record.t_date) },
      { label: "Bank", value: formatDisplay(record.bank_id) },
    ],
    [record.t_date, record.bank_id]
  );

  return (
    <RecordModal
      record={record}
      onClose={onClose}
      onEdit={onEdit}
      title="Cash withdrawal overview"
      subtitle={record.d_type || "—"}
      metrics={metrics}
      detailItems={detailItems}
    />
  );
});

CashWithdrawalModal.displayName = "CashWithdrawalModal";