"use client";

import { AdminButton } from "@/components/admin/design-system";

export default function OrdersDepositModal({
  depAmount,
  depMethod,
  onAmountChange,
  onMethodChange,
  onConfirm,
  onCancel,
}: {
  depAmount: string;
  depMethod: string;
  onAmountChange: (v: string) => void;
  onMethodChange: (v: string) => void;
  onConfirm: () => void;
  onCancel: () => void;
}) {
  return (
    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
      <div className="bg-white rounded-2xl p-6 w-96 shadow-xl border border-[var(--admin-border)]">
        <h3 className="font-semibold text-[var(--admin-text-primary)] mb-4">Record Deposit</h3>
        <div className="space-y-3">
          <div>
            <label htmlFor="fld-8-amount"  className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Amount ($)</label>
            <input id="fld-8-amount"  aria-label="Number" type="number" value={depAmount} onChange={e => onAmountChange(e.target.value)}
              className="w-full rounded-xl border border-[var(--admin-border)] px-3 py-2 text-sm outline-none focus:border-[var(--admin-accent)]" step="0.01" />
          </div>
          <div>
            <label htmlFor="fld-9-method"  className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Method</label>
            <select id="fld-9-method"  aria-label="Select" value={depMethod} onChange={e => onMethodChange(e.target.value)}
              className="w-full rounded-xl border border-[var(--admin-border)] px-3 py-2 text-sm outline-none focus:border-[var(--admin-accent)]">
              <option value="cash">Cash</option>
              <option value="check">Check</option>
              <option value="wire">Wire</option>
              <option value="card">Card</option>
            </select>
          </div>
        </div>
        <div className="mt-4 flex gap-3">
          <AdminButton onClick={onConfirm} variant="primary">
            Record Deposit
          </AdminButton>
          <AdminButton onClick={onCancel} variant="secondary">
            Cancel
          </AdminButton>
        </div>
      </div>
    </div>
  );
}
