import type { InputHTMLAttributes, ReactNode } from "react";
import type { UseFormRegisterReturn } from "react-hook-form";

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  icon?: ReactNode;
  rightIcon?: ReactNode;
  className?: string;
  label?: string;
  error?: string;
  register?: UseFormRegisterReturn;
  required?: boolean;
}

export default function Input({
  type = "text",
  placeholder,
  icon,
  rightIcon,
  className = "",
  label,
  error,
  register,
  required = false,
  ...props
}: InputProps) {
  return (
    <div className="flex flex-col gap-1">
      {label && (
        <label className="text-sm font-medium text-heading mb-1">
          {label}{required && (<span className="ml-1 text-danger">*</span>)}
        </label>
      )}

      <div className="relative">
        {icon && (
          <span className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
            {icon}
          </span>
        )}

        <input
          type={type}
          placeholder={placeholder}
          className={`
            h-12
            w-full
            rounded-xl
            border
            ${error ? "border-red-400" : "border-[#E5DFFF]"}
            bg-white
            ${icon ? "pl-12" : "pl-4"}
            ${rightIcon ? "pr-12" : "pr-4"}
            font-body
            text-base
            text-heading
            outline-none
            transition-all
            placeholder:text-gray-400
            focus:border-[#8B5CF6]
            focus:ring-2
            focus:ring-[#8B5CF6]/10
            ${className}
          `}
          {...register}
          {...props}
        />

        {rightIcon && (
          <span className="absolute right-4 top-1/2 leading-4.5 h-4.5 z-1 -translate-y-1/2 cursor-pointer">
            {rightIcon}
          </span>
        )}
      </div>

      {error && (
        <span className="text-xs text-danger">
          {error}
        </span>
      )}
    </div>
  );
}