'use client';
import React from 'react';
import { Volume2, VolumeX } from 'react-feather';
import Link from 'next/link';
import { useSoundEnabled } from '../SoundEnabledProvider';

import VisuallyHidden from '../VisuallyHidden';
import MaxWidthWrapper from '../MaxWidthWrapper';
import styles from './Header.module.css';

function Header() {
  const id = React.useId();
  const { soundEnabled, setSoundEnabled } = useSoundEnabled();

  // TODO: Global state?

  return (
    <header className={styles.wrapper}>
      <MaxWidthWrapper className={styles.innerWrapper}>
        <Link href="/">Kool Website</Link>

        <button
          onClick={() => {
            setSoundEnabled(!soundEnabled);
          }}
        >
          {soundEnabled ? <Volume2 /> : <VolumeX />}
          <VisuallyHidden>
            {soundEnabled ? 'Disable sound effects' : 'Enable sound effects'}
          </VisuallyHidden>
        </button>
      </MaxWidthWrapper>
    </header>
  );
}

export default Header;