src/App.js

import React from 'react';
import { FontMap } from './components/FontMap/';
import DarkModeToggle from './components/FontMap/components/controls/DarkModeToggle';
import { useDarkMode } from './hooks/useDarkMode';
import './App.css';

function App() {
  const { darkMode, toggleDarkMode, resetToSystemPreference } = useDarkMode();

  return (
    <div className={`App ${darkMode ? 'dark-mode' : ''}`}>
      <div className="app-header">
        <DarkModeToggle 
          darkMode={darkMode} 
          onToggle={toggleDarkMode}
          onResetToSystem={resetToSystemPreference}
        />
      </div>
      <FontMap darkMode={darkMode} />
    </div>
  );
}

export default App;