User Preferences with Local Storage

'use client';

import { useLocalStorage, useTheme } from '@sofondo/react';

export default function SettingsPage() {
  const [fontSize, setFontSize] = useLocalStorage('fontSize', 16);
  const [notifications, setNotifications] = useLocalStorage('notifications', true);
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <h1>Settings</h1>

      <div>
        <h2>Theme</h2>
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          Current: {theme} - Switch Theme
        </button>
      </div>

      <div>
        <h2>Font Size: {fontSize}px</h2>
        <button onClick={() => setFontSize(fontSize - 2)}>Decrease</button>
        <button onClick={() => setFontSize(fontSize + 2)}>Increase</button>
      </div>

      <div>
        <h2>Notifications</h2>
        <label>
          <input
            type="checkbox"
            checked={notifications}
            onChange={(e) => setNotifications(e.target.checked)}
          />
          Enable notifications
        </label>
      </div>
    </div>
  );
}