import { h } from 'preact';
import { useCallback } from 'preact/hooks';
import styles from './FullscreenToggle.module.css';

/**
 * Button to toggle fullscreen mode.
 * @returns {import('preact').VNode}
 */
const FullscreenToggle = () => {
  // Toggle fullscreen mode for the document
  const handleToggle = useCallback(() => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  }, []);

  return (
    <button
      id="fullscreen-toggle"
      className={styles.fullscreenToggle}
      onClick={handleToggle}
      title="Vollbild umschalten"
      aria-label="Vollbild umschalten"
      type="button"
    >
      <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
        <path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
      </svg>
    </button>
  );
};

export default FullscreenToggle;