import * as React from 'react';
import Template, { TemplateContainer } from '../../containers/template/Template';
import { Colors } from '../../models/colors';

const ModalTemplate = (props: TemplateContainer) => {
	return (
		<Template
			{...props}
			render={(_props: {
				elements: JSX.Element[];
				palette: Colors;
				onSubmit: (name: string, value: any, index: number) => void;
				submitButton: JSX.Element;
			}) => {
				const { elements, submitButton } = _props;
				return (
					<React.Fragment>
						{elements &&
							elements.length &&
							elements.map((item, i) => {
								return <React.Fragment key={i}>{item}</React.Fragment>;
							})}
						<footer>
							{props.moreButtons &&
								props.moreButtons.length &&
								props.moreButtons.map((button, i) => {
									return <React.Fragment key={i}>{button}</React.Fragment>;
								})}
							{submitButton}
						</footer>
					</React.Fragment>
				);
			}}
		/>
	);
};

export default ModalTemplate;