import { useState } from "react";

export default function SearchBar({ onSearch, placeholder = "Search...", style }) {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
    onSearch(e.target.value);
  };

  const handleClear = () => {
    setValue("");
    onSearch("");
  };

  return (
    <div className="relative" style={style}>
      <input
        type="text"
        value={value}
        onChange={handleChange}
        placeholder={placeholder}
        className="w-full px-3 py-2 rounded-md text-sm border"
        style={{
          backgroundColor: "var(--bg-input)",
          borderColor: "var(--border-primary)",
          color: "var(--text-primary)",
        }}
      />
      {value && (
        <button
          type="button"
          onClick={handleClear}
          className="absolute right-2 top-1/2 -translate-y-1/2"
          style={{ color: "var(--text-muted)" }}
        >
          &times;
        </button>
      )}
    </div>
  );
}
