import * as React from "react";

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

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

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

    return (
      <div className="relative w-full main-input-container">
        {leftIcon && (
          <span className="absolute start-0 top-1/2 px-4 -translate-y-1/2 ppointer-events-none w-10">
            {leftIcon}
          </span>
        )}
        <input
          type={type}
          className={cn(
            "flex h-10 w-full rounded-md border focus-visible:!outline-none border-input bg-popover px-4 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 disabled:bg-gray-200",
            className,
            leftIcon ? "ps-10" : "",
            rightIcon ? "pe-10" : "",
            error && error?.message ? "border border-[#ef233c]" : "",
          )}
          ref={ref}
          placeholder={t("enter", { name: t(placeholder || "") })}
          {...props}
        />

        {rightIcon && (
          <span
            className={`absolute ltr:right-[10px] ${
              searchButtonSubmitted && "ltr:!right-0 ltr:!pr-0"
            } ltr:left-[unset] rtl:left-0  top-1/2 -translate-y-1/2 ${
              searchCustom ? "px-0" : "px-2"
            }  ${props?.fixedWidthIcon ? "w-max" : "w-10"} 
             pr-2 flex rightIcon-input`}
          >
            {rightIcon}
          </span>
        )}
      </div>
    );
  },
);
Input.displayName = "Input";

export { Input };