import { useState, useEffect } from 'react';

export type LibraryLayoutType = 'sidebar' | 'toolbar' | 'minimal';

const LAYOUT_STORAGE_KEY = 'storycove-library-layout';

export function useLibraryLayout() {
  const [layout, setLayoutState] = useState<LibraryLayoutType>('sidebar');

  // Load layout from localStorage on mount
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const savedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY) as LibraryLayoutType;
      if (savedLayout && ['sidebar', 'toolbar', 'minimal'].includes(savedLayout)) {
        setLayoutState(savedLayout);
      }
    }
  }, []);

  // Save layout to localStorage when it changes
  const setLayout = (newLayout: LibraryLayoutType) => {
    setLayoutState(newLayout);
    if (typeof window !== 'undefined') {
      localStorage.setItem(LAYOUT_STORAGE_KEY, newLayout);
    }
  };

  return { layout, setLayout };
}