import type { TextFieldProps } from "../config/interfaces.config";
import { FormControl, FormLabel, Input } from "@mui/joy";

export const TextField = ({
  label,
  type = "text",
  required,
  errors,
  value,
  onBlur,
  onChange,
  slotProps,
  afterInput,
}: TextFieldProps) => (
  <FormControl required={required}>
    <FormLabel>{label}</FormLabel>
    <Input
      value={value ?? ""}
      onBlur={onBlur}
      onChange={(e) => onChange(e.target.value)}
      type={type}
      variant="soft"
      sx={{ borderRadius: "10px" }}
      slotProps={slotProps}
    />
    {afterInput}
    {errors[0] ? (
      <span className="text-red-500 text-sm">{errors[0]}</span>
    ) : null}
  </FormControl>
);