/**
 * A customizable input field
 * @param props - Settings for the field
 * @returns {JSX.Element} The input field
 * @example
 * <InputField
 *   label="Example"
 *   placeholder="New placeholder"
 *   type="text"
 *   value={example}
 *   onChange={(e) => {
 *     setExample(e.target.value);
 *   }}
 * />
 */
function InputField(props: {
  label?: string;
  placeholder?: string;
  type?: string;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}): JSX.Element {
  return (
    <div className="">
      <label
        className="block text-gray-700 text-sm font-sans font-bold mb-2"
        htmlFor={props.label}
      >
        {props.label}
      </label>
      <input
        className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id={props.label}
        type={props.type}
        placeholder={props.placeholder}
        value={props.value}
        onChange={props.onChange}
      />
    </div>
  );
}

export default InputField;