import React, { useEffect, useState, useMemo } from 'react';
import "../../assets/scss/index.scss";
import demokritosLogo from '../../assets/images/demokritos-logo-lm.webp';
import demokritosLogoDM from '../../assets/images/demokritos-logo-dm.webp';

type DemokritosLogoProps = {
    color?: string;
};

const DemokritosLogo: React.FC<DemokritosLogoProps> = ({ color = '#040059' }) => {
    const [isDarkTheme, setIsDarkTheme] = useState(
        document.documentElement.getAttribute('data-theme') === 'dark'
    );

    // Listen for changes to the theme attribute
    useEffect(() => {
        const observer = new MutationObserver(() => {
            setIsDarkTheme(document.documentElement.getAttribute('data-theme') === 'dark');
        });

        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });

        return () => observer.disconnect();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    // Conditionally select the logo based on the theme
    const logoSrc = useMemo(() => (isDarkTheme ? demokritosLogoDM : demokritosLogo), [isDarkTheme]);

    return (
        <img style={{ width: '100%', maxWidth: '69px' }} src={logoSrc} alt="Demokritos Logo" />
    );
};

export default DemokritosLogo;