// Simple string value
const [username, setUsername] = useLocalStorage("username", "");

// Boolean preference
const [darkMode, setDarkMode] = useLocalStorage("darkMode", false);

// Number setting
const [fontSize, setFontSize] = useLocalStorage("fontSize", 16);

interface UserProfile {
  name: string;
  email: string;
  preferences: {
    theme: string;
    language: string;
  };
}

const [profile, setProfile] = useLocalStorage<UserProfile>("userProfile", {
  name: "",
  email: "",
  preferences: {
    theme: "light",
    language: "en",
  },
});

// Update nested properties
const updateTheme = (newTheme: string) => {
  setProfile((prev) => ({
    ...prev,
    preferences: {
      ...prev.preferences,
      theme: newTheme,
    },
  }));
};

interface FormData {
  title: string;
  content: string;
  tags: string[];
}

function DraftEditor() {
  const [formData, setFormData] = useLocalStorage<FormData>("draft", {
    title: "",
    content: "",
    tags: [],
  });

  const handleSubmit = () => {
    // Submit form
    submitPost(formData);

    // Clear draft after successful submission
    setFormData({
      title: "",
      content: "",
      tags: [],
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={formData.title}
        onChange={(e) =>
          setFormData((prev) => ({
            ...prev,
            title: e.target.value,
          }))
        }
        placeholder="Title"
      />
      {/* More form fields */}
    </form>
  );
}

function useLocalStorageWithSync<T>(key: string, initialValue: T) {
  const [value, setValue] = useLocalStorage(key, initialValue);

  useEffect(() => {
    const handleStorageChange = (e: StorageEvent) => {
      if (e.key === key && e.newValue !== null) {
        setValue(JSON.parse(e.newValue));
      }
    };

    window.addEventListener("storage", handleStorageChange);
    return () => window.removeEventListener("storage", handleStorageChange);
  }, [key, setValue]);

  return [value, setValue];
}