export default function ListSearchInput({ value, onChange, resultCount, totalCount }) {
  const hasSearch = value.trim().length > 0;

  return (
    <div className="glist-search">
      <div className="glist-search-row">
        <input
          id="grocery-list-search"
          className="glist-search-input"
          type="search"
          aria-label="Search list"
          value={value}
          onChange={(event) => onChange(event.target.value)}
          placeholder="Search list"
          autoComplete="off"
        />
        {hasSearch && (
          <button
            className="glist-search-clear"
            type="button"
            onClick={() => onChange("")}
            aria-label="Clear list search"
          >
            Clear
          </button>
        )}
      </div>
      {hasSearch && (
        <p className="glist-search-meta">
          {resultCount} of {totalCount} item{totalCount === 1 ? "" : "s"}
        </p>
      )}
    </div>
  );
}