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

const Background = ({ introdeatils }) => {
  console.log("title", introdeatils[0]?.Title);
  return (
    <>
    <section className="pt-100 pb-100">
    <Container>
        <Row className="align-items-center">
          <Col lg={7}>
            <div className="corpedia-details">
              {introdeatils[0]?.Title && (
                <Heading
                  el="h2"
                  heading={introdeatils[0]?.Title}
                  className="h2"
                />
              )}
              {introdeatils[0]?.Description && (
                <p>{introdeatils[0]?.Description}</p>
              )}
            </div>
          </Col>
          <Col lg={5}>
            <div className="corpedia-details">
              <motion.div
                variants={fadeIn(0.4)}
                initial={"hidden"}
                whileInView={"show"}
                viewport={{ once: false, amount: 0.2 }}
              >
                <Image
                  src={cleanImage(introdeatils[0]?.Image?.url)}
                  layout="fill"
                  className="img-fluid image"
                  alt="image"
                />
              </motion.div>
            </div>
          </Col>
        </Row>
      </Container>
    </section>
    </>
  );
};

export default Background;