import React from "react";
import Link from "next/link";
import Image from "next/image";
import Heading from "@/components/reuseables/Heading";
import { motion } from "framer-motion";
import { fadeIn } from "@/components/reuseables/variants";
import { Col, Container, Row } from "react-bootstrap";
import { cleanImage } from "@/layout/imageHandling";


const Finance = ({finance}) => {
  console.log(finance,"PyramidofFinance")
  return (
    <>
      <div className="what-we-do-area pt-50">
        <Container>
          {/* {overviewData.map((item) => ( */}
            <Row className="align-items-center">
                 <Col lg={6} md={12}>
                <div>
                  <motion.div
                    variants={fadeIn(0.4)}
                    initial={"hidden"}
                    whileInView={"show"}
                    viewport={{ once: false, amount: 0.2 }}
                  > 
                    <Image
                      src={cleanImage(finance?.Image?.url)}
                      alt={
                        finance?.finance?.Image?.alternativeText ||
                        "image"
                      }
                      fill
                      className="img-fluid image"
                    />
                 
                  </motion.div>
                </div>
              </Col>
              <Col lg={6} md={12}>
                <div className="what-we-do-text">
                  <span className="sub-title">{finance?.Subtitle}</span>
                  <Heading el="h2" heading={finance?.Title} className="h2" />
                   <div
                    className="Content"
                    dangerouslySetInnerHTML={{ __html: finance?.Content }}
                  />
                  
                  {/* <p className="mb-3">{overview.Description}</p> */}
                  {/* <Link href={item.linkUrl} className="default-btn">
                    {item.linkText} <i className="ri-arrow-right-line"></i>
                  </Link> */}

                </div>
              </Col>

             
            </Row>
          {/* ))} */}
        </Container>
      </div>
    </>
  );
};

export default Finance;