import React, { ComponentProps } from "react";
import { cn } from "@/lib/utils";

type TInput = ComponentProps<"input"> & {
  error?: boolean;
  success?: boolean;
};

function AuthInput({ style, className, error, success, ...rest }: TInput) {
  return (
    <input
      className={cn(
        "w-full max-w-[290px] p-3.5 text-center text-lg font-semibold rounded-2xl",
        "border-2 bg-white text-gray-900 placeholder:text-gray-400",
        "dark:bg-white dark:text-gray-900 dark:placeholder:text-gray-500",
        "shadow-sm transition-[border-color,box-shadow] duration-200",
        success
          ? "border-green-500 ring-2 ring-green-500/30 focus:border-green-500 focus:ring-green-500/30"
          : error
            ? "border-red-500 ring-2 ring-red-500/20 focus:border-red-500 focus:ring-red-500/30"
            : "border-gray-200 dark:border-gray-300 focus:outline-none focus:border-[#387E65] focus:ring-2 focus:ring-[#387E65]/30",
        className
      )}
      style={{ ...style }}
      {...rest}
    />
  );
}

export default AuthInput;
