import React, { useContext, useRef } from "react";
import { DevBannerWrapper, DotHolder } from "./styles";
import BannerImg from "./assets/book.png";
import BannerImg2 from "./assets/pack.png";
import BannerImg3 from "./assets/globe.png";
import Button from "../button";

import CustomCarousel from "../fileRightBar/components/carousel.jsx";
const DeveloperBanner = ({ findText }) => {
  const items = [
    {
      img: BannerImg,
      title: "10% off your next subscription purchase?",
      subtitle: "Let's go!",
      text: "Get a discount when you upgrade to a custom plan and unlock a new world of building.",
      buttonMarginTop: null,
    },
    {
      img: BannerImg2,
      title: "Get more API calls for less with our custom plan",
      text: "Upgrade now for a 10% discount.",
      buttonMarginTop: "65px",
    },
    {
      img: BannerImg3,
      title: "Build the future with Learngual!",
      text: "Choose our custom plans for more calls and better flexibility.",
      buttonMarginTop: "39px",
    },
  ];
  return (
    <DevBannerWrapper>
      <CustomCarousel
        items={items}
        autoPlay
        interval={3500}
        largeDot
        dotColor="#febf10"
        renderItem={(item, index) => (
          <div className="dv_main" key={index}>
            <img src={item.img} alt={findText("Banner")} />

            <div className="dev_ban_inner">
              <p
                className="dev_banner_title"
                style={{ padding: "20px 0 10px" }}
              >
                {findText(item.title)}
              </p>

              {item.subtitle && (
                <p className="dev_banner_subtitle">{findText(item.subtitle)}</p>
              )}

              <p className="dev_banner_txt">{findText(item.text)}</p>

              <Button
                type="primary"
                text={findText("Contact us")}
                styles={{
                  fontSize: "16px",
                  padding: "11px 5px",
                  width: "100%",
                  height: "44px",
                  marginTop: item.buttonMarginTop || "0",
                  marginBottom: "25px",
                  boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
                }}
              />
            </div>
          </div>
        )}
      />
    </DevBannerWrapper>
  );
};
export default DeveloperBanner;
