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">
        <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?.description && (
                    <h1
                      
                    />
                  )}

                  <div className="info" dangerouslySetInnerHTML={{
                        __html: item.description,
                      }}>
                   
                  </div>
                </div>
              </Col>
            ))}
          </Row>

        </div>
      </section>
    </>
  );
};

export default CompanyOverview;