import { ClipboardList, LayoutGrid, MessageCircle } from 'lucide-react';
import type { Appeal, TabId } from '../types';
import { NotificationsPanel } from './NotificationsPanel';
import { ProfilePanel } from './ProfilePanel';
import './Header.css';

interface HeaderProps {
  activeTab: TabId;
  onTabChange: (tab: TabId) => void;
  appeals: Appeal[];
}

export function Header({ activeTab, onTabChange, appeals }: HeaderProps) {
  return (
    <header className="header">
      <div className="header-inner">
        <h1 className="header-brand">ИТ-Ассистент</h1>

        <nav className="header-nav">
          <button
            type="button"
            className={`header-nav-item ${activeTab === 'vitrina' ? 'active' : ''}`}
            onClick={() => onTabChange('vitrina')}
          >
            <MessageCircle size={18} strokeWidth={2} />
            <span>Чат</span>
          </button>
          <button
            type="button"
            className={`header-nav-item ${activeTab === 'appeals' ? 'active' : ''}`}
            onClick={() => onTabChange('appeals')}
          >
            <ClipboardList size={18} strokeWidth={2} />
            <span>История моих обращений</span>
          </button>
          <button
            type="button"
            className={`header-nav-item ${activeTab === 'catalog' ? 'active' : ''}`}
            onClick={() => onTabChange('catalog')}
          >
            <LayoutGrid size={18} strokeWidth={2} />
            <span>Каталог услуг</span>
          </button>
        </nav>

        <div className="header-actions">
          <button type="button" className="header-admin-btn">
            Администратор
          </button>
          <NotificationsPanel onNavigate={onTabChange} />
          <ProfilePanel appeals={appeals} onNavigate={onTabChange} />
        </div>
      </div>
    </header>
  );
}