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

export default function AppLogo() {
    const { setting } = usePage<{ setting: GeneralSetting }>().props;

    return (
        <div className="flex items-center gap-2 overflow-hidden">
            {setting?.logo_light_url ? (
                <img
                    src={setting.logo_light_url}
                    alt={setting.name}
                    className="max-h-8 w-auto dark:hidden"
                />
            ) : null}
            {setting?.logo_dark_url ? (
                <img
                    src={setting.logo_dark_url}
                    alt={setting.name}
                    className="hidden max-h-8 w-auto dark:block"
                />
            ) : null}
            {!setting?.logo_light_url && !setting?.logo_dark_url && (
                <span className="truncate font-semibold tracking-tight">
                    {setting?.name || 'VN Grup'}
                </span>
            )}
        </div>
    );
}