/* ========================================
   TopNav Component — padhLe
   ======================================== */

import "./TopNav.css";

const TopNav = ({ activeTab, onTabChange }) => {
  const tabs = [
    { id: "chat", label: "AI Chat", icon: "💬" },
    { id: "study", label: "Study Guides", icon: "📖" },
    { id: "progress", label: "Progress", icon: "📊" },
  ];

  return (
    <nav className="topnav">
      <div className="topnav__tabs">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`topnav__tab ${
              activeTab === tab.id ? "topnav__tab--active" : ""
            }`}
            onClick={() => onTabChange(tab.id)}
          >
            <span className="topnav__icon">{tab.icon}</span>
            <span className="topnav__label">{tab.label}</span>
          </button>
        ))}
      </div>
      <div className="topnav__actions">
        <button className="topnav__action" aria-label="Search" title="Search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="11" cy="11" r="8" />
            <path d="M21 21l-4.35-4.35" />
          </svg>
        </button>
        <button className="topnav__action" aria-label="Notifications" title="Notifications">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
            <path d="M13.73 21a2 2 0 0 1-3.46 0" />
          </svg>
        </button>
      </div>
    </nav>
  );
};

export default TopNav;