import type * as React from "react"

import { cn } from "@/lib/utils"
import { Input } from "./input"

interface IconInputProps extends React.ComponentProps<"input"> {
  icon?: React.ReactNode
  rightElement?: React.ReactNode
  inputSize?: "default" | "lg"
}

function IconInput({
  icon,
  rightElement,
  inputSize = "default",
  className,
  ...props
}: IconInputProps) {
  const isLg = inputSize === "lg"
  return (
    <div className="relative">
      {icon && (
        <div
          className={cn(
            "pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground",
            isLg ? "left-4 [&_svg]:size-5" : "left-3 [&_svg]:size-4",
          )}
        >
          {icon}
        </div>
      )}
      <Input
        className={cn(
          isLg && "h-12 rounded-xl text-base",
          icon && (isLg ? "pl-12" : "pl-10"),
          rightElement && "pr-10",
          className,
        )}
        {...props}
      />
      {rightElement && (
        <div className="absolute right-3 top-1/2 -translate-y-1/2">{rightElement}</div>
      )}
    </div>
  )
}

export { IconInput }