import { jsxs, jsx } from 'react/jsx-runtime';
import { useEffect } from 'react';
import Icon from '../Icon/Icon.js';
import Typography from '../Typography/Typography.js';

const DownloadClient = ({ onClose, top = '100px', left = '0px', className, description = 'Download and Install the fireflink client to run the script', onClick = () => { }, optionZIndex = 10000001, }) => {
    useEffect(() => {
        const handleCloseDownloadClient = (event) => {
            if (event.key === 'Escape') {
                onClose?.();
            }
        };
        document.addEventListener('keydown', handleCloseDownloadClient);
        return () => {
            document.removeEventListener('keydown', handleCloseDownloadClient);
        };
    }, [onClose]);
    const osVersion = ['windows', 'mac_icon', 'linux'];
    return (jsxs("div", { className: `ff-download-client-wrapper ${className}`, style: { top: top, left: left, zIndex: optionZIndex }, children: [jsxs("div", { className: "ff-download-client-header-wrapper", children: [jsx("div", { className: "ff-download-client-hollow-triangle" }), jsx(Typography, { fontWeight: "semi-bold", lineHeight: "32px", className: "ff-download-client-header-text", children: "Download client" }), jsx(Icon, { name: "close", color: "var(--brand-color)", className: "ff-download-client-close-icon", height: 12, width: 12 })] }), jsxs("div", { className: "ff-download-client-content-text", children: [jsx(Typography, { as: "div", color: "var(--download-client-content-text-color)", fontWeight: "semi-bold", textAlign: "center", lineHeight: "26px", children: description }), jsx(Typography, { as: "div", className: "ff-download-client-description-text", textAlign: "center", fontWeight: "medium", lineHeight: "26px", children: "Choose OS to Download" }), jsx("div", { className: "ff-download-client-os-wrapper", children: osVersion?.map((os) => (jsx("div", { className: "ff-os-version-wrapper", onClick: () => {
                                onClick(os === 'mac_icon' ? 'mac' : os);
                            }, children: jsx(Icon, { name: os, height: 36, width: 36 }) }, os))) })] })] }));
};

export { DownloadClient as default };
//# sourceMappingURL=DownloadClient.js.map
