import React from 'react'
import { Col, Container, Row } from 'react-bootstrap'
import { slideFromLeft } from "@/components/reuseables/variants";
import { motion } from "framer-motion";
import Link from 'next/link';
import Heading from '@/components/reuseables/Heading';

const WeOffer = (data) => {

    return (
        <Container className='we_offer_section'>
            <div className="section-title">
                {/* <span className="sub-title">{heading.Subtitle}</span> */}
                <Heading el="h2" heading={data?.heading?.Title} />
            </div>
            <Row className="align-items-center">
                {data?.data && data?.data.map((item, index) => (
                    <Col lg={4} md={6} sm={12} key={index}>
                        <motion.div
                            variants={slideFromLeft(0.5)}
                            initial={"hidden"}
                            whileInView={"show"}
                            viewport={{ once: false, amount: 0.4 }}
                        >
                            <div className="services-box-budget">
                                <div className="d-flex align-items-center">
                                    <h3>
                                        {item?.Title}
                                    </h3>
                                </div>
                                <div dangerouslySetInnerHTML={{ __html: item?.Description }}></div>
                            </div>
                        </motion.div>
                    </Col>
                ))}
            </Row>
        </Container>
    )
}

export default WeOffer