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

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

export default function AppLogo() {
    const { translations } = usePage<SharedData>().props;
    const areaLabel =
        (translations?.dashboard?.navigation?.group_label as string | undefined) ?? '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>
    );
}