import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading";
import Image from "next/image";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { cleanImage } from "../services/imageHandling";


const Experience = ({experience}) => {
  return (
    <section className="experience_sec es-cust sec_padd ">
      <Container className="custom_container">
        {/* Make row full height and align items center */}
        <Row className="align-items-center">
          <Col md={5} className="d-flex flex-column justify-content-center">
            <Heading el="h2" heading={experience?.title || ""} isHtml />
            <FadeInStagger direction="left">
              {/* <h2 className="heading mb-2">About</h2> */}
              <div className="gray-text" dangerouslySetInnerHTML={{ __html: experience?.description }} />
             

              {/* <div className="my-5"> <button className="btn4">Read More</button> </div> */}
            </FadeInStagger>
          </Col>
          <Col md={7}>
            <div className="exp-showroom-img">
              {
                experience?.images?.map((item, index) => (
                  <div className="img" key={index}><Image className="" width={448} height={624} alt="" src={cleanImage(item?.image?.url)}></Image></div>
                ))
              }
              {/* <div className="img"><Image className="" width={448} height={624} alt="" src="/image/showroom/01.jpg"></Image></div>
              <div className="img"><Image className="" width={448} height={624} alt="" src="/image/showroom/02.jpg"></Image></div> */}
            </div>
          </Col>
        </Row>
      </Container>
    </section>
  );
};

export default Experience;