Notes

import React from "react";
import Select from "react-select";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import MaskedInput from "react-text-mask";

const Field = ({ fieldInfo, value, onChange, error, disabled }) => {
const baseClasses =
"w-full px-4 py-2 border rounded focus:outline-none focus:ring-2";
const errorClasses = error ? "border-red-500 ring-red-300" : "border-gray-300";
const disabledClasses = disabled
? "bg-gray-100 cursor-not-allowed text-gray-500"
: "bg-white";

const fieldClasses = `${baseClasses} ${errorClasses} ${disabledClasses}`;

return (
<div className="mb-4">
{/* Render Label */}
{fieldInfo.label && (
<label
htmlFor={fieldInfo.id || fieldInfo.name}
className="block text-sm font-medium text-gray-700 mb-1"
>
{fieldInfo.label}
</label>
)}

{/* Render Field Based on Type */}
{fieldInfo.type === "text" && (
<input
type="text"
id={fieldInfo.id || fieldInfo.name}
name={fieldInfo.name}
className={fieldClasses}
value={value}
onChange={onChange}
disabled={disabled}
aria-invalid={!!error}
aria-describedby={error ? `${fieldInfo.name}-error` : undefined}
/>
)}

{fieldInfo.type === "textarea" && (
<textarea
id={fieldInfo.id || fieldInfo.name}
name={fieldInfo.name}
className={`${fieldClasses} h-24`}
value={value}
onChange={onChange}
disabled={disabled}
aria-invalid={!!error}
aria-describedby={error ? `${fieldInfo.name}-error` : undefined}
/>
)}

{fieldInfo.type === "select" && (
<Select
options={fieldInfo.options}
value={fieldInfo.options?.find((option) => option.value === value)}
onChange={(selectedOption) =>
onChange({ target: { name: fieldInfo.name, value: selectedOption?.value } })
}
isDisabled={disabled}
classNamePrefix="react-select"
className="react-select-container"
aria-label={fieldInfo.label}
/>
)}

{fieldInfo.type === "datepicker" && (
<DatePicker
selected={value}
onChange={(date) =>
onChange({ target: { name: fieldInfo.name, value: date } })
}
disabled={disabled}
className={fieldClasses}
aria-label={fieldInfo.label}
/>
)}

{fieldInfo.type === "masked" && (
<MaskedInput
mask={fieldInfo.mask}
id={fieldInfo.id || fieldInfo.name}
name={fieldInfo.name}
className={fieldClasses}
value={value}
onChange={onChange}
disabled={disabled}
aria-invalid={!!error}
aria-describedby={error ? `${fieldInfo.name}-error` : undefined}
/>
)}

{fieldInfo.type === "radio" && (
<div className="flex gap-2">
{["Yes", "No"].map((option) => (
<button
key={option}
type="button"
className={`flex-1 px-4 py-2 rounded border ${
value === option ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-700"
} ${
disabled
? "cursor-not-allowed text-gray-400"
: "hover:bg-blue-600 hover:text-white"
}`}
onClick={() =>
!disabled && onChange({ target: { name: fieldInfo.name, value: option } })
}
aria-pressed={value === option}
>
{option}
</button>
))}
</div>
)}

{/* Render Error Message */}
{error && (
<p
id={`${fieldInfo.name}-error`}
className="mt-2 text-sm text-red-500"
>
{error}
</p>
)}
</div>
);
};

export default Field;