import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import './MobileSkin.scss';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
const MobileSkin = ({ children, orientation = '', navBarIcons = [], mobileHeight = 448, mobileWidth = 220, UtilityBar, tooltip = {}, background, navBarPosition = 'bottom', }) => {
    const isPortrait = orientation === 'portrait';
    const containerHeight = isPortrait ? mobileHeight : mobileWidth;
    const containerWidth = isPortrait ? mobileWidth : mobileHeight;
    const hasTopNav = UtilityBar && navBarPosition === 'top';
    const hasBottomNav = UtilityBar && navBarPosition === 'bottom';
    return (_jsxs("div", { className: `ff-mobileskin-wrapper ${isPortrait ? 'portrait' : 'landscape'} ${hasTopNav && 'navbar-top'}`, children: [hasTopNav && (_jsx("div", { className: "ff-nav-bar top-nav-bar", children: navBarIcons.map(({ title, name, className, ...iconProps }, index) => {
                    const tooltipTitle = tooltip?.[name] || '';
                    return (_jsx(Tooltip, { title: tooltipTitle, placement: "top", children: _jsx("div", { className: `ff-nav-bar-icon ${className || ''} ${index === navBarIcons.length - 1 ? 'last-icon' : ''} ${hasTopNav ? 'navbar-top' : ''}`, children: _jsx(Icon, { name: name, ...iconProps }) }) }, tooltipTitle));
                }) })), _jsx("div", { className: "ff-mobileskin-container", style: { height: containerHeight + 16, width: containerWidth + 16 }, children: _jsx("div", { className: "ff-mobile-container", style: {
                        width: containerWidth,
                        height: containerHeight,
                        background: background ? background : 'transparent',
                    }, children: _jsx("div", { className: "ff-mobile-image-container", children: React.isValidElement(children) ? (children) : (_jsx("img", { src: children, alt: "Mobile content", style: {
                                width: isPortrait ? '100%' : `${mobileWidth * 2.1}px`,
                                height: isPortrait ? '100%' : `${mobileHeight * 0.5}px`,
                            } })) }) }) }), UtilityBar && hasBottomNav && (_jsx("div", { className: "ff-nav-bar", children: navBarIcons?.map((icon, index) => {
                    const { title, ...iconProps } = icon;
                    return (_jsx("div", { className: `ff-nav-bar-icon ${icon?.className || ''} ${index === navBarIcons.length - 1 ? 'last-icon' : ''}`, children: _jsx(Tooltip, { title: title, children: _jsx(Icon, { ...iconProps }) }) }, index));
                }) }))] }));
};
export default MobileSkin;
//# sourceMappingURL=MobileSkin.js.map