import React from "react";
import { cn } from "@/utils/helpers";
import { useTranslations } from "next-intl";

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  searchCustom?: boolean;
  placeholder?: string;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    {
      className,
      type,
      leftIcon,
      rightIcon,
      searchCustom,
      placeholder,
      name,
      ...props
    },
    ref
  ) => {
    const t = useTranslations("LABELS");

    return (
      <div className="relative w-full main-input-container">
        {leftIcon && (
          <span className="absolute ltr:left-0 rtl:right-0 top-1/2 px-2 -translate-y-1/2 pointer-events-none w-10">
            {leftIcon}
          </span>
        )}
        <input
          type={type}
          className={cn(
            "flex h-10 w-full rounded-xl border border-[#EAEDF0] focus-visible:!outline-none border-input bg-background px-3 py-2 text-sm  file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground    disabled:cursor-not-allowed disabled:opacity-50",
            leftIcon ? "ltr:pl-14 rtl:pr-14" : "",
            rightIcon ? "ltr:pr-14 rtl:pl-14" : "",
            className
          )}
          ref={ref}
          name={name}
          placeholder={t(placeholder)}
          {...props}
        />
        {rightIcon && (
          <span className="absolute ltr:right-[10px] ltr:left-[unset] rtl:left-0  top-1/2 -translate-y-1/2  px-2 w-10 pr-2 flex rightIcon-input">
            {rightIcon}
          </span>
        )}
      </div>
    );
  }
);
Input.displayName = "Input";

export { Input };