import { useMemo } from 'react';
import { Box, useColorScheme, type SxProps } from '@mui/material';
import { useTranslation } from 'react-i18next';

import LogoFaLightSvg from '@/assets/logo-fa-light.svg';
import LogoEnLightSvg from '@/assets/logo-en-light.svg';
import LogoFaDarkSvg from '@/assets/logo-fa-dark.svg';
import LogoEnDarkSvg from '@/assets/logo-en-dark.svg';
import LogoIconSvg from '@/assets/logo_icon.svg';

interface LogoProps {
  boxSx?: SxProps;
  isIcon?: boolean;
}

const LOGO_MAP = {
  fa: {
    light: LogoFaLightSvg,
    dark: LogoFaDarkSvg,
  },
  en: {
    light: LogoEnLightSvg,
    dark: LogoEnDarkSvg,
  },
} as const;

function Logo({ boxSx, isIcon = false }: LogoProps) {
  const { i18n } = useTranslation();
  const { mode } = useColorScheme();

  const logoSrc = useMemo(() => {
    if (isIcon) return LogoIconSvg;

    const lang = i18n.language.startsWith('fa') ? 'fa' : 'en';
    const resolvedMode = mode === 'dark' ? 'dark' : 'light';

    return LOGO_MAP[lang][resolvedMode];
  }, [i18n.language, mode, isIcon]);

  return (
    <Box
      component="img"
      src={logoSrc}
      alt="logo"
      sx={{
        width: isIcon ? 30 : 120,
        height: 'auto',
        ...boxSx,
      }}
    />
  );
}

export default Logo;
