'use client';

import styles from './styles/LiveNavbar.module.scss';

export default function LiveNavbar() {
  return (
    <header className={styles.navbar}>
      <div className={styles.navLeft}>
        <button
          className={styles.hamburgerBtn}
          onClick={() => window.history.back()}
        >
          <svg
            width="24"
            height="24"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M15 19l-7-7 7-7"
            />
          </svg>
        </button>
      </div>

      <div className={styles.navCenter}>
        <div className={styles.logo}>
          <span>DPOT LIVE</span>
        </div>
      </div>

      <div className={styles.navRight}>
        <button className={styles.navIcon}>
          <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
          </svg>
        </button>
        <button className={styles.navIcon}>
          <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
          </svg>
        </button>
      </div>
    </header>
  );
}