// HumanViewControls - Component for view switching and filtering
import React from 'react';

function HumanViewControls({ 
  view, 
  filterStatus, 
  filteredCount, 
  onViewChange, 
  onFilterChange, 
  onRefresh 
}) {
  const TICKET_STATUSES = ["backlog", "todo", "in_progress", "in_review", "done", "cancelled"];

  return (
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <div className="flex border rounded overflow-hidden">
          <button 
            onClick={() => onViewChange("board")}
            className={`px-3 py-1 text-xs font-medium ${
              view === "board" ? "bg-blue-600 text-white" : "bg-white text-gray-600 hover:bg-gray-50"
            }`}
          >
            Board
          </button>
          <button 
            onClick={() => onViewChange("list")}
            className={`px-3 py-1 text-xs font-medium ${
              view === "list" ? "bg-blue-600 text-white" : "bg-white text-gray-600 hover:bg-gray-50"
            }`}
          >
            List
          </button>
          <button 
            onClick={() => onViewChange("table")}
            className={`px-3 py-1 text-xs font-medium ${
              view === "table" ? "bg-blue-600 text-white" : "bg-white text-gray-600 hover:bg-gray-50"
            }`}
          >
            Table
          </button>
        </div>
        <select 
          value={filterStatus} 
          onChange={e => onFilterChange(e.target.value)}
          className="text-xs px-2 py-1 border rounded text-gray-600"
        >
          <option value="">All statuses</option>
          {TICKET_STATUSES.map(s => (
            <option key={s} value={s}>{s.replace("_", " ")}</option>
          ))}
        </select>
        <span className="text-xs text-gray-400">
          {filteredCount} task{filteredCount > 1 ? "s" : ""}
        </span>
      </div>
      <button 
        onClick={onRefresh} 
        className="text-xs px-3 py-1 bg-gray-100 text-gray-600 rounded hover:bg-gray-200"
      >
        ↻ Refresh
      </button>
    </div>
  );
}

export default HumanViewControls;
