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=" brands-overview-section catalogues-sec sec_padd">
      <div className="custom_container container">
        {companyOverviewData?.map((item, index) => {

          return (
            <Row className="my-5" key={index}>
              <Col md={6} className="mb-4">
                <div className={``}>
                  <Image
                    width={868}
                    height={538}
                    src={cleanImage(item?.image?.url)}
                    alt={item?.title}
                    className="img-fluid"
                  />
                </div>
              </Col>

              {/* FIXED HERE */}
              <Col md={6}>
                <div className="title">{item?.title}</div>
                <div className="sub-title">{item?.subTitle}</div>
                <div
                  className="info"
                  dangerouslySetInnerHTML={{
                    __html: item?.description || "",
                  }}
                />
              </Col>
            </Row>
          );
        })}
      </div>
    </section>
  );
};

export default CompanyOverview;