import { navigation } from "@/shared/config/navigation/navigation";
import styles from "@/static/header/header.module.css";

const Header = () => {
  return (
    <header className={styles.header}>
      <div className={styles["cont-header"]}>
        {/* LEFT */}
        <div className={styles.left}>
          <a href="/">
            <h1>Autli</h1>
          </a>
        </div>

        {/* RIGHT */}
        <div className={styles.right}>
          {/* Десктопное меню */}
          <nav className={styles["desktop-nav"]}>
            <ul>
              {navigation.map((item) => (
                <li key={item.href}>
                  <a href={item.href}>{item.label}</a>
                </li>
              ))}
            </ul>
          </nav>

          {/* Переключатель языка */}
          <a
            href="/en/"
            className={styles["language-toggle"]}
            aria-label="Переключить язык"
          >
            EN
          </a>

          {/* Переключатель темы */}
          <button
            className={styles["theme-toggle"]}
            id="theme-toggle"
            type="button"
            aria-label="Переключить тему"
          >
            <span className={styles["theme-icon"]}>☾</span>
          </button>

          {/* Гамбургер */}
          <button
            className={styles.hamburger}
            id="hamburger"
            type="button"
            aria-label="Открыть меню"
          >
            <span />
            <span />
            <span />
          </button>
        </div>
      </div>

      {/* Мобильное меню */}
      <nav className={styles["mobile-menu"]}>
        <ul>
          {navigation.map((item) => (
            <li key={item.href}>
              <a href={item.href}>{item.label}</a>
            </li>
          ))}
        </ul>
      </nav>
    </header>
  );
};

export default Header;