type Props = {
  step: number;
  totalSteps: number;
  saving: boolean;
  msg: string | null;
  hasError: boolean;
  onPrev: () => void;
  onNext: () => void;
  /** Present once the product exists: saves this step alone and stays put. */
  onSaveStep?: () => void;
  submitLabel?: string;
};

export default function ProductNavigation({
  step,
  totalSteps,
  saving,
  msg,
  hasError,
  onPrev,
  onNext,
  onSaveStep,
  submitLabel = "Save Product",
}: Props) {
  const isLast = step === totalSteps;

  return (
    <div className="flex flex-col gap-3 rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-100 sm:flex-row sm:items-center sm:justify-between">
      <span className={`text-sm ${hasError ? "text-red-600" : "text-emerald-700"}`}>{msg}</span>

      <div className="flex flex-wrap items-center justify-end gap-2 sm:self-end">
        <button
          type="button"
          onClick={onPrev}
          disabled={step === 1 || saving}
          className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
        >
          Previous
        </button>

        {/* Editing an existing product is rarely a run through all seven steps —
            usually it is one field on one step, so that step gets its own save
            and the wizard stays where it is. Offered on the last step too: the
            button beside it saves every step, which a product with gaps
            elsewhere cannot pass. */}
        {onSaveStep && (
          <button
            type="button"
            onClick={onSaveStep}
            disabled={saving}
            className="rounded-lg border border-[#CC1414] bg-white px-4 py-2 text-sm font-medium text-[#CC1414] hover:bg-rose-50 disabled:opacity-60"
          >
            Save this step
          </button>
        )}

        {isLast ? (
          <button
            type="submit"
            disabled={saving}
            className="rounded-lg bg-[#CC1414] px-5 py-2 text-sm font-medium text-white hover:bg-[#b21010] disabled:opacity-60"
          >
            {saving ? "Saving..." : submitLabel}
          </button>
        ) : (
          <button
            type="button"
            onClick={onNext}
            disabled={saving}
            className="rounded-lg bg-[#CC1414] px-5 py-2 text-sm font-medium text-white hover:bg-[#b21010] disabled:opacity-60"
          >
            Next
          </button>
        )}
      </div>
    </div>
  );
}