import type { Milestone } from "../lib/types";
import { JalaliDatePicker } from "./JalaliDatePicker";
import { NumberInput } from "./NumberInput";

export interface MilestoneRowProps {
  milestone: Milestone;
  onChange: (m: Milestone) => void;
  onRemove: () => void;
  disabled?: boolean;
}

// یک ردیف مرحله‌ی پرداخت: تاریخ + مبلغ + دکمه‌ی حذف
export function MilestoneRow({ milestone, onChange, onRemove, disabled = false }: MilestoneRowProps) {
  return (
    <div className="flex items-start gap-2 w-full my-2">
      {/* کادر انتخاب تاریخ — جمع‌وجور و دقیقاً متناسب با فرمت تاریخ */}
      <div className="w-28 shrink-0">
        <JalaliDatePicker
          value={milestone.when_iso}
          onChange={(iso) => onChange({ ...milestone, when_iso: iso })}
          placeholder="تاریخ"
          disabled={disabled}
        />
      </div>

      {/* کادر ورود مبلغ — کشیده و پرکننده حداکثری عرض صفحه */}
      <div className="flex-1 min-w-0">
        <NumberInput
          value={milestone.amount}
          onChange={(amount) => onChange({ ...milestone, amount })}
          placeholder="مبلغ (تومان)"
          showWords
          disabled={disabled}
        />
      </div>

      {/* دکمه حذف */}
      {!disabled && (
        <button
          type="button"
          className="mt-2 text-red-500 hover:text-red-700 text-lg font-bold shrink-0 px-1 transition-colors"
          title="حذف"
          onClick={onRemove}
        >
          ×
        </button>
      )}
    </div>
  );
}