import React, { useEffect, useState } from 'react'; import styles from './Logo.module.scss'; export interface LogoProps { /** Logo color variant - if not provided, automatically switches based on theme */ variant?: 'black' | 'white' | 'auto'; /** Logo width */ width?: number; /** Logo height */ height?: number; /** Additional CSS classes */ className?: string; } export const Logo: React.FC = ({ variant = 'auto', width = 131, height = 26, className = '', }) => { const [isDarkMode, setIsDarkMode] = useState(false); useEffect(() => { const checkTheme = () => { // Check #sideconvo-app for data-theme (WordPress plugin scoping) const appEl = document.getElementById('sideconvo-app'); if (appEl) { setIsDarkMode(appEl.getAttribute('data-theme') === 'dark'); return; } // Fallback to documentElement const theme = document.documentElement.getAttribute('data-theme'); setIsDarkMode(theme === 'dark'); }; checkTheme(); // Watch for theme changes const target = document.getElementById('sideconvo-app') || document.documentElement; const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.attributeName === 'data-theme') { checkTheme(); } }); }); observer.observe(target, { attributes: true }); return () => observer.disconnect(); }, []); const getFill = () => { if (variant === 'auto') { return isDarkMode ? 'white' : '#1A1A1A'; } return variant === 'black' ? '#1A1A1A' : 'white'; }; const fill = getFill(); return ( ); };