import { usePreferencesStore } from '../stores/preferences-store'

/**
 * Density-aware grid + spacing helpers. Reads from the user's pref so any
 * caller automatically tightens up when "Compact" is selected in Settings.
 *
 * Comfortable: 3-7 columns from sm to 2xl, 16/28px gaps
 * Compact:     4-8 columns from sm to 2xl, 12/20px gaps
 */
export function usePosterGridClasses(): string {
  const density = usePreferencesStore(s => s.density)
  return density === 'compact'
    ? 'grid grid-cols-4 sm:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8 gap-3 gap-y-5'
    : 'grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 gap-y-7'
}

export function useSquareGridClasses(): string {
  const density = usePreferencesStore(s => s.density)
  return density === 'compact'
    ? 'grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8 gap-3 gap-y-5'
    : 'grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 gap-y-7'
}

export function useDensity() {
  return usePreferencesStore(s => s.density)
}
