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 PageBanner from "@/components/reuseables/PageBanner";
import Image from "next/image";
const banners = [
  {
    imageSrc: "/images/banner/knowledge.webp",
    pageTitle: "Budget Panorama",
    homePageUrl: "/",
    homePageText: "Home",
    activePageText: "Budget Panorama",
  },
];
const services = [
  {
    id: 1,
    serviceTitle: "Budget Panorama - 2024",
    serviceShortDescription: "Overview of the latest budget details.",
    serviceDetailsUrl: "images/my_pdf/PDF1722416289.pdf",
    date: "31 Jul 2024",
  },
  {
    id: 2,
    serviceTitle: "Budget Panorama - 2023",
    serviceShortDescription: "Insights from the budget report.",
    serviceDetailsUrl: "images/my_pdf/PDF1676028541.pdf",
    date: "10 Feb 2023",
  },
  {
    id: 3,
    serviceTitle: "Budget Panorama - 2022",
    serviceShortDescription: "Summary of the budget highlights.",
    serviceDetailsUrl: "images/my_pdf/PDF1644406663.pdf",
    date: "09 Feb 2022",
  },
  {
    id: 4,
    serviceTitle: "Budget - 2021",
    serviceShortDescription: "Key points from the 2021 budget.",
    serviceDetailsUrl: "images/my_pdf/PDF1629281326.pdf",
    date: "23 Aug 2021",
  },
  {
    id: 5,
    serviceTitle: "Budget - 2020",
    serviceShortDescription: "An overview of the 2020 budget.",
    serviceDetailsUrl: "images/my_pdf/PDF1629281462.pdf",
    date: "20 Aug 2021",
  },
  {
    id: 6,
    serviceTitle: "Final Budget - 2019",
    serviceShortDescription: "Details of the final budget for 2019.",
    serviceDetailsUrl: "images/my_pdf/PDF1629874104.pdf",
    date: "12 Jul 2019",
  },
  {
    id: 7,
    serviceTitle: "Interim Budget - 2019",
    serviceShortDescription: "Information on the interim budget of 2019.",
    serviceDetailsUrl: "images/my_pdf/PDF1629874052.pdf",
    date: "11 Feb 2019",
  },
  {
    id: 8,
    serviceTitle: "Budget - 2018",
    serviceShortDescription: "Insights from the 2018 budget.",
    serviceDetailsUrl: "images/my_pdf/PDF1629874244.pdf",
    date: "12 Jun 2018",
  },
  {
    id: 9,
    serviceTitle: "Budget - 2017",
    serviceShortDescription: "Overview of the 2017 budget.",
    serviceDetailsUrl: "images/my_pdf/PDF1629874296.pdf",
    date: "12 Jun 2017",
  },
  {
    id: 10,
    serviceTitle: "Budget - 2016",
    serviceShortDescription: "Highlights from the 2016 budget.",
    serviceDetailsUrl: "images/my_pdf/PDF1629874330.pdf",
    date: "12 Jun 2016",
  },
];


const BudgetPanorama = () => {
  return (
    <>
      <PageBanner banners={banners} />
      <div className="budget-panorama-page-area pt-70 pb-100 bg-light">
        <Container>
          <div className="section-title">
            <Heading heading={"Budget Panorama"} el="h2" />
            <p>
              Budget Panorama is an annual edition released soon after the Union
              budget is presented by the Finance Minister of India. Budget
              Panorama gives a panoramic view of the recently announced budget
              with the objective of educating the audience.
            </p>
          </div>
          <Row className="align-items-center">
            {services &&
              services.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">
                        {/* <i className={service.serviceIcon}></i> */}
                        <Image
                          src="/images/knoweledge/budget_panorama.svg"
                          alt={service.serviceTitle}
                          width={40}
                          height={40}
                          className="img-fluid me-3"
                        />
                        <h3>
                          <Link href={service.serviceDetailsUrl}>
                            {service.serviceTitle}
                          </Link>
                        </h3>
                      </div>

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

                      <Link
                        href={service.serviceDetailsUrl}
                        className="default-btn"
                      >
                      Read More
                        <i className="ri-arrow-right-line"></i>
                      </Link>
                    </div>
                  </motion.div>
                </Col>
              ))}
          </Row>
        </Container>
      </div>
    </>
  );
};

export default BudgetPanorama;