import { ConfigProvider } from '@nutui/nutui-react';
import React from 'react';
import styles from './index.less';

interface IPhoneContainerProps {
	children: JSX.Element;
	style?: React.CSSProperties;
}

const PhoneContainer: React.FC<IPhoneContainerProps> = ({
	children,
	style,
}) => {
	return (
		<ConfigProvider
			theme={{
				nutuiCellGroupWrapMargin: '0rpx',
				nutuiCellGroupTitleFontSize: '18px',
				nutuiCellGroupTitleLineHeight: '28px',
				nutuiCellGroupTitlePadding: '0px 16px',
				nutuiCellFontSize: '12px',
				nutuiCellLineHeight: '28px',
				nutuiFontSizeS: '14px',
				nutuiTabbarInactiveColor: '#6B7280',
				nutuiPriceLineColor:
					'rgb(var(--colors-primary-500) / var(--tw-bg-opacity, 1))',

				nutuiColorPrimary:
					'rgb(var(--colors-primary-500) / var(--tw-bg-opacity, 1))',
				nutuiColorPrimaryStop1:
					'rgb(var(--colors-primary-500) / var(--tw-bg-opacity, 1))',
				nutuiColorPrimaryStop2:
					'rgb(var(--colors-primary-500) / var(--tw-bg-opacity, 1))',
				nutuiColorPrimaryDisabled: '#D1D5DB',
				nutuiColorPrimaryDisabledSpecial: '#D1D5DB',
				nutuiDisabledColor: '#D1D5DB',
				nutuiStepsBaseHeadTextSize: '18px',
				nutuiStepsBaseIconSize: '12px',
				nutuiFontSizeBase: '14px',

				nutuiFormItemRequiredColor: '#ff0f23',
				nutuiFormItemBodySlotsTextAlign: 'right',
				nutuiNoticebarHeight: '42px',

				nutuiSwitchHeight: '20px',
				nutuiSwitchWidth: '20px',
				nutuiSwitchLabelFontSize: '12px',
			}}
		>
			<div className={styles.pageContent}>
				<div className={styles.canvasBox}>
					<div className={styles.phoneContent} style={style}>
						{children}
					</div>
				</div>
			</div>
		</ConfigProvider>
	);
};

export default PhoneContainer;
