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}) => {
  return (
    <section className=" our-principle-section catalogues-sec sec_padd">
      <div className="custom_containers container">
        {companyOverviewData?.map((item, index) => {

          return (
            <Row className="mb-5" key={index}>
              <Col xs={12} className="mb-4">
                <div className={`banner-item`}>
                  <Image
                    width={1510}
                    height={352}
                    src={cleanImage(item?.image?.url)}
                    alt={item?.title}
                    className="img-fluid w-100"
                  />
                  <div className="title" dangerouslySetInnerHTML={{__html: item?.title}}></div>
                </div>
              </Col>
            </Row>
          );
        })}
      </div>
    </section>
  );
};

export default CompanyOverview;