import React from 'react';

export default function ProjectToolbar({ activeView = 'board', onViewChange, onAddSection }) {
  return (
    <div className="bg-[#1E293B]/70 border-b border-[#334155] px-6 py-2.5 flex flex-wrap items-center justify-between gap-3 sticky top-0 z-20 backdrop-blur-md shrink-0">
      {/* View Switcher */}
      <div className="flex items-center bg-[#111827] p-1 rounded-xl border border-[#334155]">
        {['list', 'board', 'timeline', 'calendar'].map((view) => (
          <button
            key={view}
            onClick={() => onViewChange?.(view)}
            className={`px-3 py-1 text-xs font-medium rounded-lg capitalize transition-all ${
              activeView === view
                ? 'bg-blue-600 text-white shadow-sm'
                : 'text-slate-400 hover:text-slate-200'
            }`}
          >
            {view}
          </button>
        ))}
      </div>

      {/* Action Filters */}
      <div className="flex items-center gap-2">
        <input
          type="text"
          placeholder="Search..."
          className="bg-[#111827] border border-[#334155] text-xs text-slate-200 placeholder-slate-500 rounded-xl px-3 py-1.5 focus:outline-none focus:border-blue-500 w-40 md:w-56"
        />
        <button className="px-3 py-1.5 bg-[#273449] hover:bg-slate-700 text-xs font-medium text-slate-200 rounded-xl border border-[#334155] transition-all">
          Filter
        </button>
        <button className="px-3 py-1.5 bg-[#273449] hover:bg-slate-700 text-xs font-medium text-slate-200 rounded-xl border border-[#334155] transition-all">
          Sort
        </button>
        <button
          onClick={onAddSection}
          className="px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-xs font-medium text-white rounded-xl shadow-sm transition-all"
        >
          + Add Section
        </button>
      </div>
    </div>
  );
}