import React, { useMemo } from 'react';
import { classes } from '../GooglePreview.st.css.js';
import { dataHooks } from '../constants';
import { GooglePreviewFavicon } from './GooglePreviewFavicon';
import Text from '../../Text';
import Tooltip from '../../Tooltip';
import { replaceSlash } from '../GooglePreviewUtils';
export const GooglePreviewWebsiteInfo = ({ previewUrl, favicon, siteName, onClick, tooltipContent, tooltipProps, }) => {
    const formattedUrl = useMemo(() => replaceSlash(previewUrl), [previewUrl]);
    return (React.createElement("button", { onClick: onClick, "data-hook": dataHooks.GooglePreviewWebsiteInfo, className: classes.googlePreviewWebsiteInfoCTA },
        React.createElement(Tooltip, { content: tooltipContent, disabled: !tooltipContent, ...tooltipProps, dataHook: dataHooks.GooglePreviewWebsiteInfoTooltip },
            React.createElement("div", { className: classes.googlePreviewWebsiteInfo },
                React.createElement(GooglePreviewFavicon, { faviconUrl: favicon }),
                React.createElement("div", { className: classes.googlePreviewWebsiteInfoContent },
                    React.createElement(Text, { weight: "thin", size: "tiny", light: false, secondary: false, className: classes.googlePreviewSiteName, dataHook: dataHooks.GooglePreviewSiteName, ellipsis: true, showTooltip: false }, siteName),
                    React.createElement(Text, { weight: "thin", size: "tiny", light: false, className: classes.googlePreviewUrl, dataHook: dataHooks.GooglePreviewPreviewUrl, ellipsis: true, showTooltip: false }, formattedUrl))))));
};
//# sourceMappingURL=GooglePreviewWebsiteInfo.js.map