import { cn } from "@/app/lib/cn";
import { SearchNormal } from "iconsax-reactjs";
import { FC } from "react";

export type InputVariant = "primary" | "search";

type Props = {
  variant?: InputVariant;
  className?: string;
  iconClassName?: string;
} & React.InputHTMLAttributes<HTMLInputElement>;

const Input: FC<Props> = ({ variant = "primary", className, iconClassName, ...rest }) => {
  return (
    <div className="relative w-full" dir="rtl">
      {variant === "search" && (
        <SearchNormal
          aria-hidden="true"
          className={cn("pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-primary", iconClassName)}
          color="currentColor"
          size={20}
        />
      )}
      <input
        type={variant === "search" ? "search" : rest.type}
        className={cn(
          "h-10 w-full rounded-2xl border border-secondary bg-white px-4 text-right text-sm text-[#3A4147] placeholder:text-[#D7E0E8] transition-colors focus:border-primary",
          variant === "search" && "pr-11",
          className,
        )}
        {...rest}
      />
    </div>
  );
};

export default Input;