import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";

const CompanyOverview = ({ companyOverviewData }) => {
  console.log("productData cat", companyOverviewData);
  return (
    <>
      <section className="about-section about-info-section p-0">
        <div className="container">
          <Row className="my-5">
            {companyOverviewData?.map((item, index) => (
              <Col md={6} key={item.id || index}>
                <div
                  className={`luxury-items ${
                    index % 2 !== 0 ? "option02" : ""
                  }`}
                >
                  <Image
                    width={index % 2 !== 0 ? 570 : 806}
                    height={index % 2 !== 0 ? 629 : 560}
                    src={cleanImage(item?.image?.url)}
                    alt="Luxury"
                  />

                  {/* {item?.title && <h1 />} */}

                  <div
                    className="info"
                    dangerouslySetInnerHTML={{
                      __html: item?.title,
                    }}
                  ></div>
                </div>
              </Col>
            ))}
          </Row>
        </div>
      </section>
    </>
  );
};

export default CompanyOverview;