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 = (data=[]) => {
    const overviewData = Array.isArray(data)
  ? data
  : Array.isArray(data?.data)
  ? data.data
  : [];
  return (
    <>
      <section className="about-info-section company-overview-section">
        <div className="container">
       

<Row className="my-5">
  {overviewData.map((item, index) => {
    const isAlt = index % 2 !== 0;

    return (
      <Col md={6} key={item?.id || index} className="mb-4">
        <div className={`luxury-items ${isAlt ? "option02" : ""}`}>
          <Image
            width={594}
            height={560}
            src={cleanImage(item?.image?.url)}
            alt={item?.title}
          />
          <div className="title">{item?.title}</div>
          <div
            className="info"
            dangerouslySetInnerHTML={{
              __html: item?.description || "",
            }}
          />
        </div>
      </Col>
    );
  })}
</Row>

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

export default CompanyOverview;