import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { OrderlyAppContext } from "../provider/appProvider";
import { cn } from "../utils/css";
import { useMediaQuery } from "@orderly.network/hooks";
import { MEDIA_TABLET } from "@orderly.network/types";
import React, { useContext, useMemo } from "react";
export const MainLogo = ({ link = "/", // image,
title, size })=>{
    const matches = useMediaQuery(MEDIA_TABLET);
    const { appIcons } = useContext(OrderlyAppContext);
    if (!appIcons?.main?.img && !appIcons?.main?.component) return null;
    // const [url, setUrl] = React.useState<string>();
    const _size = useMemo(()=>{
        if (typeof size === "number") {
            return size;
        }
        if (matches) {
            return 50;
        }
        return 48;
    }, [
        size
    ]);
    const logoElement = useMemo(()=>{
        if (appIcons?.main?.img) {
            return /*#__PURE__*/ _jsx("img", {
                src: appIcons?.main?.img,
                height: _size
            });
        }
        return null;
    }, [
        appIcons?.main,
        _size
    ]);
    if (appIcons?.main?.component) {
        return /*#__PURE__*/ _jsx(_Fragment, {
            children: appIcons.main.component
        });
    }
    // if(matches){
    return /*#__PURE__*/ _jsx("div", {
        className: cn("orderly-inline-flex orderly-flex-row orderly-justify-center orderly-items-center orderly-px-3", appIcons.main?.className),
        style: {
            height: `${_size}px`
        },
        children: /*#__PURE__*/ _jsx("a", {
            href: link,
            children: logoElement
        })
    });
// }
};

//# sourceMappingURL=mainLogo.js.map