import Image from "next/image";
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { cleanImage } from "../../services/imageHandling.js";
const PageBanner = ({blog}) => {
  let mainBlog;
  if (blog && blog.length > 0) {
    mainBlog = blog[0];
  }
  console.log("123", mainBlog)
  return (
    <>
      <div className="page-title-area">
        <div className="banner-bg">
          <span className="image-container hide-on-mobile">
            <Image layout="fill" className="image img-fluid" alt="" src={cleanImage(mainBlog?.attributes?.image?.data?.attributes)} />
          </span>
          <span className="image-container hide-on-desktop">
            <Image layout="fill" className="image img-fluid" alt="" src="/images/blogs/01.png" />
          </span>
        </div>
      </div>
    </>
  );
};

export default PageBanner;