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";
import Link from "next/link";

const Certifications = ({certificationsData}) => {
  return (
    <section className=" certifications-section sec_padd">
      <div className=" container">
        <Row className="text-center justify-content-center">
          <Col>
            <Heading el="h2" heading="Certifications" />
          </Col>
        </Row>
        {certificationsData?.cardItems?.map((item, index) => {
          return (
            <>
              <Row className="my-5 certifications-item" key={index}>
                <Col md={3} className="mb-4">
                  <Image
                      width={348}
                      height={304}
                      src={cleanImage(item?.image?.url)}
                      alt={item?.title}
                      className="img-fluid"
                    />
                </Col>

                {/* FIXED HERE */}
                <Col md={9}>
                  <div className="title">{item?.title}</div>
                  {/* <div className="sub-title">{item?.subTitle}</div> */}
                  <div
                    className="info"
                    dangerouslySetInnerHTML={{
                      __html: item?.description || "",
                    }}
                  />
                  <div className="download-content"><Link href={item?.url || "#"}>{item?.download} <i className="fa-solid fa-arrow-right ms-2"></i></Link></div>
                </Col>
              </Row>
            </>
          );
        })}
      </div>
    </section>
  );
};

export default Certifications;