import React from "react";
import Image from "next/image";
import { Col, Container, Row } from "react-bootstrap";
import { motion } from "framer-motion";
import { fadeIn } from "@/components/reuseables/variants";
import Heading from "@/components/reuseables/Heading";
import Link from "next/link";
import { cleanImage } from "@/layout/imageHandling";
const areasofExpertise = [
  {
    id: 1,
    image: "/images/home/areas_of_expertise/assurance.webp",
    altText: "Project Image",
    title: "Assurance",
    category:
      "Value creation for us means delivering more than advice; it's about tangible, assured results through our integrated Assurance expertise",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 2,
    image: "/images/home/areas_of_expertise/direct_tax.webp",
    altText: "Project Image",
    title: "Direct Tax",
    category: "Expertise in Indian and International tax challenges",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 3,
    image: "/images/home/areas_of_expertise/indirect_tax.webp",
    altText: "Project Image",
    title: "Indirect Tax",
    category: "Deep expertise navigating GST complexities",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 4,
    image: "/images/home/areas_of_expertise/corporate_legal.webp",
    altText: "Project Image",
    title: "Corporate Legal",
    category:
      "Our Corporate Legal expertise ensures we cover all the entire ground in all our engagements",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 5,
    image: "/images/home/areas_of_expertise/corporate_law.webp",
    altText: "Project Image",
    title: "Corporate Law and FEMA",
    category:
      "Setting up a company to getting Foreign Control law clearance - we do it all",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 6,
    image: "/images/home/areas_of_expertise/cross_border_transactions.webp",
    altText: "Project Image",
    title: "Cross Border Transactions",
    category: "Excelling at complex cross-border transactions",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
];

const AreasofExpertise = ({AreasofExpertiseList}) => {
  console.log(AreasofExpertiseList, "areas");
  return (
    <>
      <div className="areas-of-expertise pt-100 pb-70 bglight">
        <Container fluid className="ps-md-5 pe-md-5"> 
          <div className="section-title">
            <Heading el="h2" heading="Areas of Expertise" className="h2" />
          </div>

          <Row className="justify-content-center">
            {AreasofExpertiseList &&
              AreasofExpertiseList.map((item, index) => {
                console.log("Areas", item);
                return (
                  <Col lg={4} md={6} key={item.id}>
                    <div className="single-projects-box">
                      <motion.div
                        variants={fadeIn(index * 1)}
                        initial={"hidden"}
                        whileInView={"show"}
                        viewport={{ once: false, amount: 0.5 }}
                      >
                        <Image
                          src={cleanImage(item.Image?.url)}
                          alt={item.altText}
                          layout="fill"
                          className="img-fluid rounded-3 image"
                        />
                        <h3>{item.Title}</h3>
                        <span className="default-btn area_expertise">
                          {item.Description}
                        </span>
                      </motion.div>
                    </div>
                  </Col>
                );
              })}
          </Row>
        </Container>
      </div>
    </>
  );
};

export default AreasofExpertise;