import React, { useEffect } from "react";
import { Carousel, Col, Container, Row } from "react-bootstrap";
import blog1 from "./Img/blog1.png";
import blog2 from "./Img/blog2.png";
import blog3 from "./Img/blog3.png";
import Heading from "../Heading/Heading";
import blogbg from "./Img/blogbg.png";
import "./Blog.css";
import Ibutton from "../Button/Button";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useInView } from "react-intersection-observer";
import { motion } from "framer-motion";
import { useAnimation } from "framer-motion";
export default function Blog({ id }) {
  const { ref, inView } = useInView();
  const animation = useAnimation();

  useEffect(() => {
    if (inView) {
      animation.start({
        y: 0,

        transition: {
          ease: "easeOut",
          duration: 1,
        },
      });
    }
    if (!inView) {
      animation.start({ y: "10vw" });
    }
  });
  const { t } = useTranslation();
  let blogList = [
    {
      blogItem: [
        {
          image: <img src={blog1} style={{ maxWidth: "100%" }} alt="" />,
          title: "Introducing New features",
          date: "March 10, 2022",
          discription: (
            <>
              lorem lipsum lorem lipsum lorem lipsum lorem lipsum lorem lipsum
              lorem lipsum lorem lipsum lorem lipsum lorem
            </>
          ),
        },
        {
          image: <img src={blog2} style={{ maxWidth: "100%" }} alt="" />,
          title: "Introducing New features",
          date: "March 10, 2022",
          discription: (
            <>
              lorem lipsum lorem lipsum lorem lipsum lorem lipsum lorem lipsum
              lorem lipsum lorem lipsum lorem lipsum lorem
            </>
          ),
        },
        {
          image: <img src={blog3} style={{ maxWidth: "100%" }} alt="" />,
          title: "Introducing New features",
          date: "March 10, 2022",
          discription: (
            <>
              lorem lipsum lorem lipsum lorem lipsum lorem lipsum lorem lipsum
              lorem lipsum lorem lipsum lorem lipsum lorem
            </>
          ),
        },
      ],
    },
    {
      blogItem: [
        {
          image: <img src={blog1} style={{ maxWidth: "100%" }} alt="" />,
          title: "Introducing New features",
          date: "March 10, 2022",
          discription: (
            <>
              lorem lipsum lorem lipsum lorem lipsum lorem lipsum lorem lipsum
              lorem lipsum lorem lipsum lorem lipsum lorem
            </>
          ),
        },
        {
          image: <img src={blog2} style={{ maxWidth: "100%" }} alt="" />,
          title: "Introducing New features",
          date: "March 10, 2022",
          discription: (
            <>
              lorem lipsum lorem lipsum lorem lipsum lorem lipsum lorem lipsum
              lorem lipsum lorem lipsum lorem lipsum lorem
            </>
          ),
        },
        {
          image: <img src={blog3} style={{ maxWidth: "100%" }} alt="" />,
          title: "Introducing New features",
          date: "March 10, 2022",
          discription: (
            <>
              lorem lipsum lorem lipsum lorem lipsum lorem lipsum lorem lipsum
              lorem lipsum lorem lipsum lorem lipsum lorem
            </>
          ),
        },
      ],
    },
    {
      blogItem: [
        {
          image: <img src={blog1} style={{ maxWidth: "100%" }} alt="" />,
          title: "Introducing New features",
          date: "March 10, 2022",
          discription: (
            <>
              lorem lipsum lorem lipsum lorem lipsum lorem lipsum lorem lipsum
              lorem lipsum lorem lipsum lorem lipsum lorem
            </>
          ),
        },
        {
          image: <img src={blog2} style={{ maxWidth: "100%" }} alt="" />,
          title: "Introducing New features",
          date: "March 10, 2022",
          discription: (
            <>
              lorem lipsum lorem lipsum lorem lipsum lorem lipsum lorem lipsum
              lorem lipsum lorem lipsum lorem lipsum lorem
            </>
          ),
        },
        {
          image: <img src={blog3} style={{ maxWidth: "100%" }} alt="" />,
          title: "Introducing New features",
          date: "March 10, 2022",
          discription: (
            <>
              lorem lipsum lorem lipsum lorem lipsum lorem lipsum lorem lipsum
              lorem lipsum lorem lipsum lorem lipsum lorem
            </>
          ),
        },
      ],
    },
  ];
  return (
    <>
      <section
        className="sectionShadow"
        id={id}
        style={{
          height: "100%",
          marginTop: "100px",
          backgroundImage: `url(${blogbg}) `,
          backgroundPosition: "center",
          backgroundSize: "cover",
          paddingBottom: "150px",
          backgroundRepeat: "no-repeat",
        }}>
        <Container className=" pt-5 " ref={ref}>
          <div className="pt-5">
            {/* <p
              style={{
                fontFamily: "semibold",
                color: "#0262F7",
                letterSpacing: "2px",
                fontSize: "14px",
              }}>
           
            </p> */}
            <Heading
              title={t("blog.heading")}
              fontFamily="semibold"
              fontSize="32px"
            />

            <p
              style={{
                fontFamily: "light",
              }}>
              {t("blog.content")}
            </p>
          </div>
          <Carousel
            className="mt-5"
            fade
            nextIcon={<span aria-hidden="true" className="nexticon" />}
            prevIcon={<span aria-hidden="true" className="nexticon" />}>
            {blogList.map(({ blogItem }) => {
              return (
                <Carousel.Item style={{ backgroundColor: "transparent" }}>
                  <section>
                    <Row
                      className="align-items-center d-flex justify-content-center"
                      style={{ backgroundColor: "transparent" }}>
                      {blogItem.map((value) => {
                        return (
                          <Col
                            xl={4}
                            lg={4}
                            md={4}
                            style={{ backgroundColor: "transparent" }}>
                            <motion.div animate={animation}>
                              <div
                                className="mb-2"
                                style={{ backgroundColor: "transparent" }}>
                                {value.image}
                                <p
                                  className="pt-2"
                                  style={{
                                    color: "#C1C1C1",
                                    fontFamily: "light",
                                    fontSize: "14px",
                                  }}>
                                  {value.date}
                                </p>
                                <Heading
                                  title={value.title}
                                  fontSize="20px"
                                  fontFamily="semibold"
                                />
                                <p
                                  style={{
                                    fontFamily: "light",
                                    fontSize: "14px",
                                  }}>
                                  {value.discription}
                                </p>
                                <Link to="/Blogs">
                                  <Ibutton
                                    className=" "
                                    title={t("blog.readmore")}
                                    paddingTop="7px"
                                    paddingBottom="7px"
                                    backgroundColor="#E8FBFF"
                                    color="#0262F7"
                                    borderRadius="0px"
                                    borderColor="#E8FBFF"
                                    fontSize="13px"
                                    href="/Blogs"
                                  />
                                </Link>
                              </div>
                            </motion.div>
                          </Col>
                        );
                      })}
                    </Row>
                  </section>
                </Carousel.Item>
              );
            })}
          </Carousel>
        </Container>
      </section>
    </>
  );
}
