// styling
import styles from './styles.module.scss';

// components
import { NavLink } from 'react-router-dom';

// utils
import PropTypes from 'prop-types';
import { useThemeProvider } from "@contexts/themeContext";
import logo from '@assets/logo/logo.png';
import logo_dark from '@assets/logo/logo.png';
import logo_light from '@assets/logo/logo_w.png';
import logo_small from '@assets/logo/logo_small4.png';
import logo_small_black from '@assets/logo/logo_small4.png';
import logo_small_light from '@assets/logo/logo_small5.png';
import { APP_THEME } from "@constants/app";

const Logo = ({ size = 'md' }) => {
    const { theme, isMobile } = useThemeProvider();
    // const logourl=isMobile()?(theme===APP_THEME.DARK?logo_small_black:logo_small_light):(theme===APP_THEME.DARK?logo_dark:logo_light);
    // const logourl=(theme=='dark'?logo_dark:logo_light);
    const logourl = logo;
    return (
        <NavLink className={`${styles.logo} ${styles[size]}`} to="/">
            {/* <img className={`${isMobile() ? styles.logo_img_m : styles.logo_img}`} src={logourl} /> */}
            <img className={`${size == "md" ? styles.normal : ""}`} src={logourl} />
        </NavLink>
    );
};

Logo.propTypes = {
    size: PropTypes.oneOf(['sm', 'md', 'xl'])
};

export default Logo;
