import * as React from "react"
import { Search } from "lucide-react"

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

const SEARCH_INPUT_CLASS =
  "pl-10 pr-4 h-10 max-[1500px]:h-9 text-[13px] max-[1500px]:text-[12px] font-bold bg-white border-border/80 rounded-xl max-[1500px]:rounded-sm w-full font-['Lexend_Deca'] shadow-sm focus:ring-accent/20 focus:border-accent hover:border-accent/40 transition-all placeholder:text-gray-400"

type SearchInputProps = Omit<React.ComponentProps<typeof Input>, "type"> & {
  wrapperClassName?: string
  iconSize?: number
  suffix?: React.ReactNode
}

const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
  ({ className, wrapperClassName, iconSize = 14, suffix, ...props }, ref) => {
    return (
      <div className={cn("relative group", wrapperClassName)}>
        <Search
          size={iconSize}
          className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-accent transition-colors duration-300 pointer-events-none"
        />
        <Input
          ref={ref}
          type="search"
          className={cn(SEARCH_INPUT_CLASS, className)}
          {...props}
        />
        {suffix}
      </div>
    )
  },
)
SearchInput.displayName = "SearchInput"

export { SearchInput, SEARCH_INPUT_CLASS }