import React from "react"
import { FaSearch } from "react-icons/fa"

const SearchBox = ({ value, onChange, width = 220, placeholder = "Keresés...", className = "" }) => {
  return (
    <div
      className={`flex items-center border-2 border-[color:var(--color-success)] rounded-lg bg-[color:var(--color-surface)]/40 px-2 ${className}`}
      style={{ width }}
    >
      <FaSearch className="text-[color:var(--color-success)] mr-2" />
      <input
        type="text"
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        className="flex-1 py-1 bg-transparent text-[color:var(--color-text)] border-none outline-none"
      />
    </div>
  )
}

export default SearchBox
