import React from "react";
import Image from "next/image";

export default function Productpage(props) {
  return (
    <>
      <div className="container-fluid products-container navbar-spacing">
        <div className="row align-items-center min-height-100">
          <div
            className={`align-self-stretch background-image d-flex flex-column justify-content-center products-img-shadow products-img ${props.reversed ? "order-lg-1" : ""
              } ${props.smallbg ? "col-lg-5" : "col-lg-6"}`}
            style={{ backgroundImage: `url(${props.bgurl})` }}
          >
            <div className="center-icon">
              {props.iconurl &&
                <Image src={props.iconurl} width={300} height={300} alt={props.iconalt} className="products-icon" priority/>
              }

            </div>
          </div>
          <div
            className={`col-lg-6 pl-0 align-self-center p-5 mb-5 h-100 ${props.smallbg ? "col-lg-7" : "col-lg-6"
              }`}
          >
            <h1 className="mainheading">{props.title}</h1>
            <div className="description">
              <p dangerouslySetInnerHTML={{ __html: props.text }}></p>
              {props.addtext && props.addtext}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}