import { HTMLInputTypeAttribute, forwardRef } from "react";

interface Props<T = string> {
  inputIcon?: JSX.Element;
  required?: boolean;
  name?: string;
  value: string;
  placeholder?: string;
  type?: HTMLInputTypeAttribute;
  handleChange: (value: T) => void;
  error?: string;
  warning?: string;
  disabled?: boolean;
  className?: string;
}

export const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
  const {
    inputIcon,
    required,
    name,
    value,
    placeholder,
    type,
    handleChange,
    error,
    warning,
    disabled = false,
    className = "",
  } = props;
  return (
    <>
      <div className="flex items-center border border-solid border-t_text_primary border-opacity-10 rounded-lg py-0 px-3 gap-2 bg-t_bg_secondary ">
        {inputIcon}
        <input
          ref={ref}
          disabled={disabled}
          required={!!required}
          name={name || ""}
          value={value}
          placeholder={placeholder}
          type={type ? type : "text"}
          className={`relative h-10 leading-10 z-[1] outline-none w-full text-t_text_primary bg-transparent border-none ${
            error
              ? "border border-t_error_dark bg-gradient-to-r from-t_error_dark/15 to-t_bg_secondary/15 px-3 shadow-[0_0_6px_rgba(255,0,0,0.5)]"
              : ""
          } ${
            warning
              ? "border-t_warning_dark bg-gradient-to-r from-t_warning_dark/15 to-t_bg_secondary/15 px-3 shadow-[0_0_6px_rgba(255,165,0,0.5)]"
              : ""
          } ${className}`}
          onChange={(e) => handleChange(e.target.value)}
        />
      </div>
      {error && (
        <div className="flex justify-between pt-[10px]">
          <div className="px-5 text-t_text_red">{error}</div>
        </div>
      )}
      {warning && (
        <div className="flex justify-between pt-[10px]">
          <div className="px-5 text-t_text_orange">{warning}</div>
        </div>
      )}
    </>
  );
});