import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading";
import { cleanImage } from "@/components/services/imageHandling";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";

const Overview = ({aboutData}) => {
  return (
    <section className="overview_sec sec_padd ">
      <Container className="custom_container">
        {/* Make row full height and align items center */}
        <Row className="align-items-center">
          <Col md={7} className="d-flex flex-column justify-content-center pe-0 pe-md-5">
            <Heading el="h2" heading={aboutData?.title} />
            <FadeInStagger direction="left">
              {/* <h2 className="heading mb-2">About</h2> */}
              <div dangerouslySetInnerHTML={{__html: aboutData?.description}}></div>
             
               
               <div className="my-4"> <Link href={aboutData?.readMoreUrl || "#"} className="btn4">Read More <i className="fa-solid fa-arrow-right"></i></Link> </div>
        
            </FadeInStagger>
          </Col>

          <Col md={5} className="d-flex justify-content-center">
            <div className="video-wrapper">
              <video src={cleanImage(aboutData?.Video?.url)} autoPlay muted loop playsInline />
              {/* <Image
                src="/video/about.mp4"
                alt="About"
                width={600}
                height={600}
                className="img-fluid"
              /> */}
              {/* <div className="shine-overlay"></div> */}
            </div>
          </Col>
        </Row>
       
      </Container>
    </section>
  );
};

export default Overview;