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
}

function IconInput({ icon, rightElement, className, ...props }: IconInputProps) {
  return (
    <div className="relative">
      {icon && (
        <div className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:size-4">
          {icon}
        </div>
      )}
      <Input className={cn(icon && "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 }