import React from "react";
import { Col, Row } from "react-bootstrap";
import Image from "next/image";
import { motion } from "framer-motion";
import Heading from "@/components/reuseables/Heading";

const ContentSection = ({
  subtitle,
  title,
  paragraphs,
  imageSrc,
  imageAlt,
  reverse,
  animation,
}) => {
  return (
    <Row
      className="align-items-center mb-5 mb-lg-5 mb-xl-5 gx-5"
      style={{
        flexDirection: reverse ? "row-reverse" : "row",
      }}
    >
      <Col lg={6} md={12}>
        <motion.div
          variants={animation}
          initial={"hidden"}
          whileInView={"show"}
          viewport={{ once: false, amount: 0.4 }}
        >
          <Image
            src={imageSrc}
            alt={imageAlt}
            layout="fill"
            className="img-fluid image"
          />
        </motion.div>
      </Col>
      <Col lg={6} md={12}>
        <div className="call-back-request-text">
          <span className="sub-title">{subtitle}</span>
          <Heading el="h2" heading={title} />
          {paragraphs.map((paragraph, index) => (
            <p key={index}>{paragraph}</p>
          ))}
        </div>
      </Col>
    </Row>
  );
};

export default ContentSection;