import clsx from "clsx";
import SpinIcon from "./icons/SpinIcon";

interface NewInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  placeholder?: string;
  isError?: boolean;
  errorMessage?: string;
  isLoading?: boolean;
}

function Input({
  placeholder,
  isError,
  errorMessage,
  isLoading,
  ...props
}: NewInputProps) {
  return (
    <div className={clsx("relative", props.disabled && "opacity-40")}>
      <input
        {...props}
        placeholder=""
        className={clsx(
          isError
            ? "hover:ring-[#FF4517] focus:ring-[#FF4517]"
            : "hover:ring-[#7B60F3] focus:ring-[#7B60F3]",
          "peer bg-[#F6F6F6] rounded-[0.833vw] px-[1.111vw] pt-[19px] pb-[11px] outline-none ring-1 ring-transparent transition-all inline-block w-full h-[3.889vw] text-m"
        )}
      />
      {placeholder && (
        <span
          className="absolute caption-m font-medium text-[#7D7D7D] left-[1.111vw] top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300 
              peer-focus:caption-xs peer-focus:top-[0.556vw] peer-focus:translate-y-0
              peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:top-[0.556vw] peer-[:not(:placeholder-shown)]:translate-y-0"
        >
          {placeholder + (props.required ? "*" : "")}
        </span>
      )}
      {isError && (
        <p className="caption-s font-medium text-[#FF4517] mt-[0.556vw]">
          {errorMessage}
        </p>
      )}
      {isLoading && (
        <div className="size-[1.389vw] text-[#7B60F3] animate-spin z-1 absolute right-[1.111vw] top-1/2 -translate-y-1/2">
          <SpinIcon />
        </div>
      )}
    </div>
  );
}

export default Input;