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 DateField({ field, value, onChange, error }: Props) {
  const inputType = field.format === "date" ? "date" : "datetime-local";

  const normalized = field.format === "date-time" && typeof value === "string"
    ? value.replace(/\.\d+Z$/, "").replace(/Z$/, "")
    : value;

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