const SwaperSlideContent = ({
  ImageUrl = "",
  Title = "",
  Body = "",
  ContentAlign = "right",
}) => {
  return (
    <div className="container-fluid p-0">
      <div
        className="position-relative text-center text-white"
        style={{
          background: `url('${ImageUrl}') center center/cover no-repeat`,
          height: "500px",
        }}
      >
        {/* Overlay */}
        <div
          className="position-absolute top-0 start-0 w-100 h-100"
          style={{
            background:
              "linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.1))",
          }}
        ></div>

        {/* Text Content */}
        <div
          className={
            "position-absolute top-50  p-5 " +
            (ContentAlign == "left"
              ? "start-0  text-start ps-10 ms-10"
              : "start-50  text-end pe-10 me-10")
          }
          style={{
            borderRadius: "10px",
            background:
              "linear-gradient(to bottom, rgba(194, 216, 237,1), rgba(105, 108, 255, 0.8))",
            boxShadow: "10px 10px 15px rgba(0, 0, 0, 0.4)",
          }}
        >
          <h1 className="fw-bold text-primary hero-title display-6 fw-extrabold">
            {Title}
          </h1>
          <p className="lead  text-dark">{Body}</p>
          {/* <a
                                href="#services"
                                className="btn btn-primary btn-lg mt-3"
                              >
                                Get Started
                              </a> */}
        </div>
      </div>
    </div>
  );
};

export default SwaperSlideContent;