import * as React from 'react';

import Footer, { FooterProps } from '../../../containers/footer/Footer';
import { Colors } from '../../../models/colors';
import { Config } from '../../../models/config';
import { pStyle, headerStyle, footerInnerWrapper, footerOneStyle } from './footerOne.style';

const FooterOne = (props: FooterProps) => {
	return (
		<Footer
			{...props}
			render={(palette?: Colors, config?: Config) => {
				palette = palette || props.palette;
				config = config || props.config;
				return (
					<div className={footerOneStyle(palette)} data-automation={props.automationName}>
						<div className={footerInnerWrapper()}>
							<header className={headerStyle(palette)}>
								<a target="blank" href={config.privacyLink}>
									{props.header || props.translator('footerOne.header').toString()}{' '}
								</a>
							</header>
							<p className={pStyle(palette)}>
								{props.content || props.translator('footerOne.content').toString()}
							</p>
						</div>
					</div>
				);
			}}
		/>
	);
};

export default FooterOne;