import { usePage } from "@inertiajs/react";
import AppLogoIcon from "@/components/app-logo-icon";

export default function AppLogo({ light = false }: { light?: boolean }) {
    const { name } = usePage().props;

    return (
        <>
            <div className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-blue-500 text-white shadow-lg shadow-blue-950/20">
                <AppLogoIcon className="size-5 fill-current text-white" />
            </div>
            <div className="ml-1 grid min-w-0 flex-1 text-left group-data-[collapsible=icon]:hidden">
                <span
                    className={`truncate text-[16px] font-bold leading-tight tracking-tight ${light ? "text-white" : "text-white"}`}
                >
                    MINANGA
                </span>
                <span
                    className={`truncate text-[10px] leading-tight ${light ? "text-slate-400" : "text-slate-500"}`}
                >
                    Multi Company CRM
                </span>
            </div>
        </>
    );
}