import { usePage } from '@inertiajs/react';
import { Icon } from '@/components/ui/icon';

type PagePropsWithLangDebug = {
    langDebug?: boolean;
};

export function LangDebugBanner() {
    const { langDebug = false } = usePage<PagePropsWithLangDebug>().props;

    if (!langDebug) {
        return null;
    }

    return (
        <div
            className="pointer-events-none fixed inset-x-0 bottom-0 z-[100] flex justify-center px-3 pb-3"
            role="status"
            aria-live="polite"
        >
            <div className="pointer-events-auto flex max-w-xl items-center gap-2 rounded-md border border-amber-600/40 bg-amber-400 px-3 py-1.5 text-xs font-medium text-amber-950 shadow-md">
                <Icon icon="solar:bug-bold-duotone" className="size-4 shrink-0" />
                <span>
                    Lang debug: chei i18n active. Dezactivează cu{' '}
                    <code className="rounded bg-amber-950/10 px-1">?langdebug=0</code> în URL.
                </span>
            </div>
        </div>
    );
}