import React from 'react';
import { usePage } from '@inertiajs/react';

export default function SiteLogo({ className = "h-8 w-auto" }) {
    const { site_settings } = usePage().props;
    
    const appName = site_settings?.site_name || 'Titan News';
    
    // Fallback logic to support old `site_logo` if users haven't updated yet
    const lightLogo = site_settings?.site_logo_light || site_settings?.site_logo; 
    const darkLogo = site_settings?.site_logo_dark || lightLogo;

    // If no logos are uploaded, fallback to text
    if (!lightLogo && !darkLogo) {
        return (
            <span className={`font-black font-serif tracking-tight text-primary ${className} flex items-center`}>
                {appName}
            </span>
        );
    }

    return (
        <>
            {/* Light Mode Logo (Hidden in Dark Mode) */}
            {lightLogo && (
                <img 
                    src={lightLogo} 
                    alt={appName} 
                    className={`block dark:hidden object-contain ${className}`} 
                />
            )}
            
            {/* Dark Mode Logo (Hidden in Light Mode) */}
            {darkLogo && (
                <img 
                    src={darkLogo} 
                    alt={appName} 
                    className={`${lightLogo ? 'hidden dark:block' : 'block'} object-contain ${className}`} 
                />
            )}
        </>
    );
}