import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import './DownloadClient.scss';
import Icon from '../Icon';
import Typography from '../Typography';
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 default DownloadClient;
//# sourceMappingURL=DownloadClient.js.map