import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Image, Title } from "../../components/index.js";
import { LocationContext } from "../../gravity-blocks/context/locationContext/index.js";
import { useTheme } from "../../gravity-blocks/context/theme/index.js";
import { Grid } from "../../gravity-blocks/grid/index.js";
import { useAnalytics } from "../../gravity-blocks/hooks/index.js";
import { block, getLinkProps, getThemedValue } from "../../utils/index.js";
import './Icons.css';
const b = block('icons-block');
const getItemContent = (item) => (_jsxs(React.Fragment, { children: [_jsx(Image, { className: b('image'), src: item.src }), _jsx("p", { className: b('text'), children: item.text })] }));
const Icons = ({ title, description, size = 's', colSizes = { all: 12 }, items }) => {
    const { hostname } = React.useContext(LocationContext);
    const handleAnalytics = useAnalytics();
    const theme = useTheme();
    const onClick = React.useCallback(({ analyticsEvents, url }) => {
        handleAnalytics(analyticsEvents, { url });
    }, [handleAnalytics]);
    return (_jsx(Grid, { children: _jsxs("div", { className: b({ size }), children: [(title || description) && (_jsx(Title, { className: b('header'), title: title, subtitle: description, colSizes: colSizes })), items &&
                    items.map((item) => {
                        const themedSrc = getThemedValue(item.src, theme);
                        const itemContent = getItemContent({ ...item, src: themedSrc });
                        const { url, text } = item;
                        return url ? (_jsx("a", { className: b('item'), href: url, "aria-label": text, title: text, ...getLinkProps(url, hostname), onClick: () => onClick(item), children: itemContent }, url)) : (_jsx("div", { className: b('item'), children: itemContent }, text));
                    })] }) }));
};
export default Icons;
//# sourceMappingURL=Icons.js.map
