import React from "react";
import { TextField } from "@mui/material";
import type { FieldConfig } from "../../../types";

interface Props {
  field: FieldConfig;
  value: any;
  onChange: (value: any) => void;
  error?: string;
}

export function NumberField({ field, value, onChange, error }: Props) {
  const isFloat = field.type === "number" || field.format === "float";

  return (
    <TextField
      fullWidth
      label={field.label}
      type="number"
      value={value ?? ""}
      onChange={(e) => {
        const raw = e.target.value;
        if (raw === "") {
          onChange("");
        } else {
          onChange(isFloat ? parseFloat(raw) : parseInt(raw, 10));
        }
      }}
      error={!!error}
      helperText={error ?? field.description}
      placeholder={field.description}
      size="small"
      disabled={field.readOnly}
      inputProps={isFloat ? { step: "any" } : undefined}
    />
  );
}