import { Building2 } from 'lucide-react';
import { usePage } from '@inertiajs/react';

export default function AppLogo() {
    const { personalizer } = usePage().props as any;
    const logoUrl: string | null = personalizer?.branding?.default_logo ?? null;

    if (!logoUrl) {
        return <Building2 className="h-6 w-6 text-foreground" />;
    }

    return (
        <div className="h-8 w-32">
            <img src={logoUrl} alt="Logo" className="h-full w-auto object-contain" />
        </div>
    );
}

export function AppLogoLight() {
    const { personalizer } = usePage().props as any;
    const logoUrl: string | null = personalizer?.branding?.default_logo ?? null;

    if (!logoUrl) {
        return <Building2 className="h-6 w-6 text-foreground" />;
    }

    return (
        <div className="h-8 w-32">
            <img src={logoUrl} alt="Logo" className="h-full w-auto object-contain" />
        </div>
    );
}