import { Link, useLocation } from 'react-router-dom'
import './Header.css'

export default function Header() {
  const location = useLocation()

  return (
    <header className="header">
      <div className="header-inner">
        <div className="header-left">
          <Link to="/" className="logo">КИОН</Link>
          <nav className="nav">
            <span className="nav-item stub">Главная</span>
            <span className="nav-item stub">Телеканалы</span>
            <span className="nav-item stub">Фильмы</span>
            <span className="nav-item stub">Сериалы</span>
            <Link to="/games" className={`nav-item nav-games${location.pathname === '/games' ? ' active' : ''}`}>Игры</Link>
          </nav>
        </div>
        <div className="header-right">
          <button className="icon-btn" aria-label="Фильтры">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <line x1="4" y1="6" x2="20" y2="6"/>
              <line x1="8" y1="12" x2="16" y2="12"/>
              <line x1="11" y1="18" x2="13" y2="18"/>
            </svg>
          </button>
          <button className="icon-btn" aria-label="Поиск">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="11" cy="11" r="8"/>
              <line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>
          </button>
          <button className="promo-btn stub">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polyline points="20 12 20 22 4 22 4 12"/>
              <rect x="2" y="7" width="20" height="5"/>
              <line x1="12" y1="22" x2="12" y2="7"/>
              <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/>
              <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>
            </svg>
            Промокод
          </button>
          <div className="degi-pill stub">Деги</div>
          <button className="login-btn stub">Войти</button>
        </div>
      </div>
    </header>
  )
}