import { cn } from '@/lib/utils';
import { usePage } from '@inertiajs/react';
import type { GeneralSetting } from '@/types';

export default function AppLogoIcon({ className }: { className?: string }) {
    const { setting } = usePage<{ setting: GeneralSetting }>().props;

    if (!setting?.icon_light_url && !setting?.icon_dark_url) {
        return (
            <img src="/assets/logo.webp" alt="Logo" className={className} />
        );
    }

    return (
        <>
            {setting?.icon_light_url && (
                <img
                    src={setting.icon_light_url}
                    alt="Logo Light"
                    className={cn('dark:hidden', className)}
                />
            )}
            {setting?.icon_dark_url && (
                <img
                    src={setting.icon_dark_url}
                    alt="Logo Dark"
                    className={cn('hidden dark:block', className)}
                />
            )}
        </>
    );
}