import { useThemeConfig } from '@/components/Layout/ThemeProvider';
import { useTheme } from '@mui/material';
import _ from 'lodash';
import { useEffect } from 'react';

type ThemeColorProps = {
  source?: 'paper' | 'default';
};
/**
 * ThemeColor component is responsible for setting the theme color in the browser.
 * It uses the current theme mode and the theme object to set the theme color.
 */
function ThemeColor({ source = 'paper' }: ThemeColorProps) {
  const { mode } = useThemeConfig();
  const theme = useTheme();
  useEffect(() => {
    const backgroundColor = _.get(theme.palette.background, source);
    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', backgroundColor as string);
  }, [mode, theme, source]);

  return null;
}

export { ThemeColor };