'use client';

export default function AlbumToolbar({ query, setQuery, filters, filterId, setFilterId, itemsInFolder }) {
  return (
    <div className="project-album-toolbar">
      <label className="project-album-search">
        <svg className="project-album-search-icon" width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
          <circle cx="7" cy="7" r="5" />
          <line x1="10.6" y1="10.6" x2="14" y2="14" />
        </svg>
        <input
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search artifacts, documents, and content…"
          aria-label="Search project library"
        />
        {query ? (
          <button type="button" className="project-album-search-clear" onClick={() => setQuery('')} aria-label="Clear search">×</button>
        ) : null}
      </label>
      <div className="project-album-filters" role="tablist" aria-label="Filter">
        {filters.map((f) => {
          const count = itemsInFolder.filter(f.match).length;
          const isActive = filterId === f.id;
          return (
            <button
              key={f.id}
              type="button"
              role="tab"
              aria-selected={isActive}
              className={`project-album-filter${isActive ? ' on' : ''}`}
              onClick={() => setFilterId(f.id)}
            >
              <span>{f.label}</span>
              <code>{count}</code>
            </button>
          );
        })}
      </div>
    </div>
  );
}
