MyClub/frontend/src/hooks/useClubTheme.ts

import { usePublicSettings } from './usePublicSettings';
import { useMemo } from 'react';
import { PublicSettings } from '../services/settings';

interface ThemeColors {
  primary: string;
  secondary: string;
  text: string;
  background: string;
  accent: string;
  [key: string]: string; // For any additional color keys
}

interface ClubTheme {
  primaryColor: string;
  secondaryColor: string;
  textColor: string;
  backgroundColor: string;
  accentColor: string;
  isDarkMode: boolean;
  logoUrl?: string;
  faviconUrl?: string;
  colors: ThemeColors;
}

const DEFAULT_THEME: ClubTheme = {
  // Modern cool palette defaults (no red/yellow)
  primaryColor: '#1e3a8a',      // blue-800
  secondaryColor: '#0ea5a4',    // teal-500
  textColor: '#0f172a',         // slate-900
  backgroundColor: '#ffffff',
  accentColor: '#2563eb',       // blue-600
  isDarkMode: false,
  colors: {
    primary: '#1e3a8a',
    secondary: '#0ea5a4',
    text: '#0f172a',
    background: '#ffffff',
    accent: '#2563eb'
  }
};

export const useClubTheme = (): ClubTheme => {
  const { data: settings } = usePublicSettings();

  return useMemo<ClubTheme>(() => {
    if (!settings) return DEFAULT_THEME;

    const primaryColor = settings.primary_color || DEFAULT_THEME.primaryColor;
    const secondaryColor = settings.secondary_color || DEFAULT_THEME.secondaryColor;
    const textColor = settings.text_color || DEFAULT_THEME.textColor;
    const backgroundColor = settings.background_color || DEFAULT_THEME.backgroundColor;
    const accentColor = settings.accent_color || DEFAULT_THEME.accentColor;

    return {
      primaryColor,
      secondaryColor,
      textColor,
      backgroundColor,
      accentColor,
      isDarkMode: false, // No dark_mode in PublicSettings, default to false
      logoUrl: settings.club_logo_url,
      faviconUrl: undefined, // No favicon_url in PublicSettings
      colors: {
        primary: primaryColor,
        secondary: secondaryColor,
        text: textColor,
        background: backgroundColor,
        accent: accentColor,
        // Add any additional color mappings here
      }
    };
  }, [settings]);
};

export default useClubTheme;