import React from "react";
import { FormControl, InputLabel, Select, MenuItem, FormHelperText } from "@mui/material";
import type { FieldConfig } from "../../../types";

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

export function EnumField({ field, value, onChange, error }: Props) {
  return (
    <FormControl fullWidth size="small" error={!!error}>
      <InputLabel>{field.label}</InputLabel>
      <Select
        value={value ?? ""}
        label={field.label}
        onChange={(e) => onChange(e.target.value)}
        disabled={field.readOnly}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        {(field.enumValues ?? []).map((opt) => (
          <MenuItem key={opt} value={opt}>
            {opt}
          </MenuItem>
        ))}
      </Select>
      {field.description && <FormHelperText>{field.description}</FormHelperText>}
    </FormControl>
  );
}