import { formatVND } from "@/lib/finance";
import { ICONS } from "@/lib/icons";

interface UpcomingDebt {
  id: string;
  counterparty: string;
  type: string;
  amount: number;
  dueDate: string;
  scope: string;
}

export function DebtCalendarPanel({ debts }: { debts: UpcomingDebt[] }) {
  return (
    <div className="card p-5">
      <div className="mb-3 flex items-center gap-2 font-bold text-slate-800">
        <ICONS.calendar size={18} strokeWidth={1.75} className="text-slate-400" /> Lịch công nợ & thanh toán (7 ngày tới)
      </div>
      {debts.length === 0 ? (
        <div className="text-sm text-slate-400">Không có công nợ nào đến hạn trong 7 ngày tới.</div>
      ) : (
        <div className="flex flex-col gap-2">
          {debts.map((d) => (
            <div key={d.id} className="flex items-center justify-between rounded-lg border border-slate-100 px-3 py-2 text-sm">
              <div>
                <div className="font-medium text-slate-700">{d.counterparty}</div>
                <div className="text-xs text-slate-400">
                  {d.type === "RECEIVABLE" ? "Phải thu" : "Phải trả"} · hạn {new Date(d.dueDate).toLocaleDateString("vi-VN")}
                </div>
              </div>
              <div className={`font-semibold ${d.type === "RECEIVABLE" ? "text-emerald-600" : "text-rose-600"}`}>{formatVND(d.amount)}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}