import { memo } from "react";
import "./Feature.scss";

import LazyLoad from "react-lazy-load";

const Feature = memo(props => {
	const innerBody = [
		<>
			<h1>{props.title}</h1>
			{props.subtitle && <h2>{props.subtitle}</h2>}
			<p>{props.body}</p>
		</>,
		<>
			{props.images.map((image, idx) => (
				<LazyLoad debounce={false} offsetVertical={700} offsetTop={700}>
					<img key={image} src={image} alt="" className={props.imageClassNames?.[idx]} />
				</LazyLoad>
			))}
		</>,
	];

	return (
		<section className="feature">
			<div className={`left ${props.images.length === 2 ? "two-images" : ""}`}>
				{innerBody[props.reversed ? 1 : 0]}
			</div>
			<div className={`right ${props.images.length === 2 ? "two-images" : ""}`}>
				{innerBody[!props.reversed ? 1 : 0]}
			</div>
		</section>
	);
});

export default Feature;