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

import { type SharedData } from '@/types';

export default function AppLogo() {
    const { translations } = usePage<SharedData>().props;
    const navigationTranslations =
        translations && typeof translations.dashboard === 'object' && translations.dashboard !== null
            ? (translations.dashboard as Record<string, unknown>).navigation
            : null;
    const groupLabel =
        navigationTranslations && typeof navigationTranslations === 'object' && navigationTranslations !== null
            ? (navigationTranslations as Record<string, unknown>).group_label
            : null;
    const areaLabel = typeof groupLabel === 'string' ? groupLabel : 'Kundenbereich';

    return (
        <div className="flex items-center gap-3">
            <img src="/logo-transparent-md.png" alt="Fotospiel" className="h-10 w-auto" />
            <div className="grid text-left leading-tight">
                <span className="text-sm font-semibold text-sidebar-foreground">Fotospiel</span>
                <span className="text-xs text-sidebar-foreground/70">{areaLabel}</span>
            </div>
        </div>
    );
}