import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"
import clsx from "clsx"
import { ChangeEvent } from "react"

interface SearchBarProps {
  value: string
  onChange: (e: ChangeEvent<HTMLInputElement>) => void
  placeholder?: string
  className?: string
}

export function SearchBar({ value, onChange, placeholder = "Search...", className = "" }: SearchBarProps) {
  return (
    <div className={clsx("flex items-center bg-white  px-3 py-1 w-full rounded-sm", className)}>
      <Search className="w-6 h-6 text-gray-400 mr-3" />
      <Input
        type="text"
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        className="border-none shadow-none bg-transparent text-gray-500 text-base focus:ring-0 focus-visible:ring-0 focus:ring-offset-0 flex-1 p-0"
      />
    </div>
  )
}