import {
	type ComponentPropsWithoutRef,
	forwardRef,
	type ReactNode,
} from "react";
import Input from "~/components/ui/input";
import { cn } from "~/lib/utils";

type InputWIconProps = ComponentPropsWithoutRef<typeof Input> & {
	iconPosition: "start" | "end";
	children: ReactNode;
};
const InputWIcon = forwardRef<HTMLInputElement, InputWIconProps>(
	({ children, iconPosition, ...props }, ref) => {
		return (
			<div className="relative">
				<Input
					className={cn("peer", iconPosition === "start" ? "ps-9" : "pe-9")}
					{...props}
					ref={ref}
				/>
				<div
					className={cn(
						"pointer-events-none absolute inset-y-0 flex items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50",
						iconPosition === "start" ? "start-0 ps-3" : "end-0 pe-3",
					)}
				>
					{children}
				</div>
			</div>
		);
	},
);

InputWIcon.displayName = "InputWIcon";

export default InputWIcon;
