import { useMemo } from 'react';
import { usePreferences } from '@app/contexts/PreferencesContext';
import { useAppConfig } from '@app/contexts/AppConfigContext';
import type { LogoVariant } from '@app/services/preferencesService';
import { ensureLogoVariant } from '@app/constants/logo';

export function useLogoVariant(): LogoVariant {
  const { preferences } = usePreferences();
  const { config } = useAppConfig();

  return useMemo(() => {
    // Check local storage first, then fall back to server config
    const preferenceVariant = preferences.logoVariant;
    const configVariant = config?.logoStyle;
    return ensureLogoVariant(preferenceVariant ?? configVariant);
  }, [config?.logoStyle, preferences.logoVariant]);
}