import { usePage } from "@inertiajs/react";
import AppLogoIcon from "@/components/app-logo-icon";
import { useI18n } from "@/lib/i18n";
import type { PageProps } from "@inertiajs/core";

type Shared = PageProps & { appName?: string };

export default function AppLogo() {
    const { appName } = usePage<Shared>().props;
    const { t } = useI18n();
    return (
        <div className="flex items-center gap-2.5">
            <div className="relative flex size-8 items-center justify-center rounded-lg border border-emerald-300/20 bg-emerald-400/10 shadow-[0_0_20px_rgba(16,185,129,.08)]">
                <AppLogoIcon className="size-4 fill-current text-emerald-300" />
            </div>
            <div className="grid flex-1 text-left">
                <span className="truncate text-sm font-bold leading-tight text-white">
                    {appName || "Bulec Analytic"}
                </span>
                <span className="text-[9px] font-semibold uppercase tracking-[.16em] text-slate-600">
                    {t("app.market_intelligence", "Market Intelligence")}
                </span>
            </div>
        </div>
    );
}