import React from "react";
import Link from "next/link";
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 Image from "next/image";
import { cleanImage } from "@/layout/imageHandling";
const services = [
  {
    id: 1,
    serviceTitle: "Budget Panorama - 2024",
    serviceShortDescription: "Advith Consulting is a seasoned business consulting firm with nearly 40 years of experience. The firm is led by a core team of highly experienced professionals with sound knowledge in their area of expertise.",
    serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Budget-Panorama-2024.pdf",
    date: "31 Jul 2024",
  },
  {
    id: 2,
    serviceTitle: "Budget Panorama - 2023",
    serviceShortDescription: "Advith Consulting is a business consulting firm with almost 40 years of experience on its resume. We provide a myriad of business consulting services in the fields of Direct tax, Indirect tax, Outsourcing (CFO services, Accounts, Payroll & Compliance Management), Corporate law & Advisory among others.",
    serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Budget-Panorama-2023.pdf",
    date: "10 Feb 2023",
  },
  {
    id: 3,
    serviceTitle: "Budget Panorama - 2022",
    serviceShortDescription: "Amidst the growing worry due to the 3rd Covid wave, in particular the Omicron wave, the Hon'ble Finance Minister of India (FM) presented the Budget 2022 on 1st February 2022. The Economic Survey which was tabled before the India Parliament indicated a real GDP expansion of 9.2% in 2021-22, which showed a faster recovery of the economy after it contracted in FY 2020-21. This a positive sign and also shows the resilience that the Indian economy inherently has.",
    serviceDetailsUrl: "/images/knoweledge/pdf/budgetpanorama/Budget-Panorama-2022.pdf",
    date: "09 Feb 2022",
  },
];

const BudgetPanorama = ({Budgetpanorama , budgetlist}) => {
  const budgetlistlatest = budgetlist.slice(0, 3);

  return (
    <>
      <div className="budget-panorama-area pt-70 pb-100 bg-light">
        <Container>
          <Row>
            <Col lg={8} md={8} sm={12}>
              <div className="text-align-left">
                <Heading
                  heading={Budgetpanorama?.Title}
                  el="h2"
                />

                <p className="mb-lg-5 mb-3">
                 {Budgetpanorama?.Description}
                </p>
              </div>
            </Col>
            <Col
              lg={4}
              md={4}
              sm={12}
              className="d-flex align-self-center justify-content-start justify-content-lg-end mb-5 mb-lg-0"
            >
              <Link href="/budgetpanorama" className="default-btn-two">
                Load More <i className="ri-arrow-right-line"></i>
              </Link>
            </Col>
          </Row>

          <Row className="align-items-center">
            {budgetlistlatest &&
              budgetlistlatest.map((service, index) => (
                <Col lg={4} md={6} sm={12} key={service.id}>
                <motion.div
                  variants={slideFromLeft(index * 0.5)}
                  initial={"hidden"}
                  whileInView={"show"}
                  viewport={{ once: false, amount: 0.4 }}
                >
                  <div className="services-box-budget">
                    <div className="d-flex align-items-center">
                      <Image
                        src={cleanImage(service?.Image?.url)}
                        alt={service?.alternativeText ? service?.alternativeText : "image"}
                        width={40}
                        height={40}
                        className="img-fluid me-3"
                      />
                      <h3>
                        <Link href={`/budgetpanorama/${service?.slug ? service?.slug : "#"}`}>
                          {service.Title}
                        </Link>
                      </h3>
                    </div>

                    <p>{service.Description}</p>

                    <Link href={`/budgetpanorama/${service?.slug ? service?.slug : "#"}`}
                      className="default-btn" target="_blank"
                    >
                      Read More
                      <i className="ri-arrow-right-line"></i>
                    </Link>
                  </div>
                </motion.div>
              </Col>
              ))}
          </Row>
        </Container>
      </div>
    </>
  );
};

export default BudgetPanorama;