import { useTheme } from './ThemeContext';

/**
 * Returns theme-aware color values for recharts components.
 *
 * Recharts accepts only raw color strings (not CSS variables),
 * so this hook bridges the Tailwind/CSS-variable theme system
 * to the imperative recharts API.
 */
export function useChartTheme() {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  return {
    /** Axis tick and grid line stroke color */
    axisStroke: isDark ? '#94a3b8' : '#64748b',
    /** Tooltip container background */
    tooltipBg: isDark ? '#1e293b' : '#ffffff',
    /** Tooltip container border */
    tooltipBorder: isDark
      ? '1px solid rgba(99, 102, 241, 0.3)'
      : '1px solid rgba(99, 102, 241, 0.2)',
    /** Tooltip label text color */
    tooltipLabelColor: isDark ? '#f8fafc' : '#0f172a',
    /** Tooltip item text color */
    tooltipItemColor: isDark ? '#e2e8f0' : '#334155',
    /** Convenience: full contentStyle object for recharts Tooltip */
    tooltipContentStyle: {
      backgroundColor: isDark ? '#1e293b' : '#ffffff',
      border: isDark
        ? '1px solid rgba(99, 102, 241, 0.3)'
        : '1px solid rgba(99, 102, 241, 0.2)',
      borderRadius: '8px',
      color: isDark ? '#f8fafc' : '#0f172a',
    },
    /** Convenience: labelStyle for recharts Tooltip */
    tooltipLabelStyle: {
      color: isDark ? '#f8fafc' : '#0f172a',
    },
  };
}