import React from "react";
import "./sliderComponent.css";
import "../../styles/styles.css"
import Swiper from "../swiper/swiper";

export const SliderComponent: React.FC<any> = React.memo(({ text }) => {
  return (
    <div data-aos="zoom-in" data-aos-duration="500" className="slider-container">
      <div className="slider">
        <div className="main-block__content_slider">
          <div data-aos="fade-up" data-aos-delay="400"
            className="main-block__container_slider main-block__container">
            <div>
              <p className="main-block__title">Graff.estate </p>
              <p className="main-block__title_gardient title__gardient_pos">stream</p>
            </div>
            <p className=" main-block__caption_color main-block__caption_color_slider">
              {text.mainBlockCaptionColor}
            </p>
            <p className="main-block__caption_l">{text.mainBlockCaption}</p>
          </div>
        </div>
      </div>
      <Swiper
        text={text}
        slidesPerView={'2'}
        centeredSlides={false}
        spaceBetween={0}
        modules={[]}
        className={""}
        rewind={true}
        children={undefined}
        slideToClickedSlide={true}
      ></Swiper>
    </div>
  );
});
