import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMobileLayout } from './layout/use-mobile-layout';
const icon = {
    display: 'flex',
    width: 36,
    height: 36,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 0,
};
const outer = {
    textAlign: 'center',
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column',
    color: 'var(--ifm-font-color-base)',
    cursor: 'pointer',
    filter: 'drop-shadow(0px 0px 4px var(--background))',
    textDecoration: 'none',
};
export const TemplateIcon = ({ children, label }) => {
    const mobileLayout = useMobileLayout();
    return (_jsxs("span", { style: outer, children: [_jsx("div", { style: icon, children: children }), mobileLayout ? null : _jsx("div", { className: "text-xs fontbrand", children: label })] }));
};
