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 StringField({ field, value, onChange, error }: Props) {
  const inputType = field.format === "email" ? "email" : "text";

  return (
    <TextField
      fullWidth
      label={field.label}
      type={inputType}
      value={value ?? ""}
      onChange={(e) => onChange(e.target.value)}
      error={!!error}
      helperText={error || field.description || undefined}
      placeholder={field.description || undefined}
      size="small"
      disabled={field.readOnly}
    />
  );
}