import React from 'react';
import { ISmsConfig } from '../../app';
import { JDbutton, JDdocSection } from '@janda-com/front';
import { JDphotoFrame, JDdoc, JDdocHeader } from '@janda-com/front';
import { lang as LANG } from '../../lang/langFn';
import { IButtonProps } from '@janda-com/front/build/components/button/Button';

export interface ISmsInfoProp {
	lastBtnProp?: IButtonProps
}
interface Iprops extends ISmsInfoProp {
	config: ISmsConfig;
}

const SmsInfo: React.FC<Iprops> = ({ lastBtnProp }) => {
	return (
		<div>
			<JDphotoFrame
				unStyle={true}
				type=".png"
				lang={'kr'}
				src={
					'https://s3.ap-northeast-2.amazonaws.com/booking.stayjanda.files/booking_app/describe/smsinfo_img_02'
				}
			/>
			<JDdoc>
				<JDdocSection>
					<div style={{
						paddingTop: "1rem"
					}}>
						<JDdocHeader>{LANG('how_to_save_sms_template_title')}</JDdocHeader>
					</div>
					{LANG('how_to_save_sms_template_doc')}
				</JDdocSection>
				<JDdocSection>
					<div style={{
						paddingTop: "1rem"
					}}>
						<JDdocHeader>{LANG('how_to_send_sms_for_all_title')}</JDdocHeader>
					</div>
					{LANG('how_to_send_sms_for_all_doc')}
				</JDdocSection>
				{lastBtnProp && <div className="JDflex--center">
					<JDbutton
						{...lastBtnProp}
					/>
				</div>}
			</JDdoc>
		</div>
	);
};

export default SmsInfo;
