import React from "react";
import "../styles/ActivityLogControls.css";

const ActivityLogControls = ({
  entriesPerPage,
  searchText,
  onEntriesPerPageChange,
  onSearchChange,
  viewMode = "list",
  onViewModeChange,
}) => {
  return (
    <div className="activity-log-controls-bar">
      <div className="activity-log-controls-left">
        <div className="show-entries">
          <label>Show</label>
          <select
            className="entries-select"
            value={entriesPerPage}
            onChange={onEntriesPerPageChange}
          >
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
          <span>entries</span>
        </div>
        {onViewModeChange && (
          <div className="view-mode-toggle" role="group" aria-label="View mode">
            <button
              type="button"
              className={`view-mode-btn ${viewMode === "list" ? "active" : ""}`}
              onClick={() => onViewModeChange("list")}
              title="List view"
              aria-pressed={viewMode === "list"}
            >
              <span className="view-mode-icon view-mode-icon-list" aria-hidden />
              List
            </button>
            <button
              type="button"
              className={`view-mode-btn ${viewMode === "card" ? "active" : ""}`}
              onClick={() => onViewModeChange("card")}
              title="Card view"
              aria-pressed={viewMode === "card"}
            >
              <span className="view-mode-icon view-mode-icon-card" aria-hidden />
              Card
            </button>
          </div>
        )}
      </div>
      <div className="search-box">
        <label>Search:</label>
        <input
          type="text"
          className="search-field"
          placeholder="Search activity..."
          value={searchText}
          onChange={onSearchChange}
        />
      </div>
    </div>
  );
};

export default ActivityLogControls;

