import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import {PiArrowElbowDownRightLight } from "react-icons/pi";


const Visions = () => {

  const slideSettings = {
    dots: false,
    infinite: false,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3,
    initialSlide: 0,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          initialSlide: 0,
          infinite: true,
          dots: false
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  }

  return (
    <div className="w-full mb-[12vw]">
        <div className="flex justify-between text-3xl tracking-tight px-14 mb-5">
            <p>Transforming visions into brands.</p>
            <a href="" className="flex gap-2">
                <PiArrowElbowDownRightLight className="text-2xl"/>
                <p className="btn">See the work</p>
            </a>
        </div>
        <div className=" px-10">
          <Slider {...slideSettings}>
            <div className="relative overflow-hidden">
              <img src="https://images.prismic.io/rejouice/d8e1fa1f-4f24-41e1-a249-098c62df5aff_Group+46+%281%29.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
              <video src="../src/assets/Website-homepage-Work-01_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
            </div>
            <div className="relative overflow-hidden">
              <img src="https://images.prismic.io/rejouice/e0350a3d-c390-4d97-af1a-5c86bc822b52_Group+3929.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
              <video src="../src/assets/Website-homepage-Work-02_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
            </div>
            <div className="relative overflow-hidden">
              <img src="https://images.prismic.io/rejouice/2874f084-ec6c-4a19-b025-a55c1e6db929_Group+3692.jpg" alt="" className="px-4 w-[100%] h-[100%] transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer"/>
              <video src="../src/assets/Website-homepage-Work-03_1.mp4" autoPlay muted loop className="px-4 absolute inset-0 -z-[1]"></video>
            </div>
          </Slider>
        </div>
    </div>
  )
}

export default Visions