import { defineStore } from 'pinia';
import { ref, watch } from 'vue';

export const useSettingsStore = defineStore('settings', () => {
  // Initialize from localStorage or defaults
  const editorFontSize = ref<number>(
    Number(localStorage.getItem('editorFontSize')) || 14
  );
  
  const editorFontFamily = ref<string>(
    localStorage.getItem('editorFontFamily') || 'Fira Code, Consolas, monospace'
  );

  // Watchers for persistence
  watch(editorFontSize, (val) => {
    localStorage.setItem('editorFontSize', val.toString());
  });

  watch(editorFontFamily, (val) => {
    localStorage.setItem('editorFontFamily', val);
  });

  return {
    editorFontSize,
    editorFontFamily,
  };
});
