text: import React, { useState } from "react";
  
  // import react slick
  import Slider from "react-slick";
  import Image from "next/image";
  import Stars from "../public/assets/Icon/stars.svg";
  import ArrowBack from "../public/assets/Icon/eva_arrow-back-fill.svg";
  import ArrowNext from "../public/assets/Icon/eva_arrow-next-fill.svg";
  import Link from "next/link";
  
  const Testimoni = ({
    listTestimoni = [
      {
        name: "IIITU Result Portal",
        image: "/assets/p2.JPG",
        city: "Warsaw",
        country: "Poland",
        rating: "4.5",
        testimoni:
          "A prototype for our institute's result portal built on MERN stack with user friendly UI and optimized performance",
          link: "https://github.com/joharikushagra/results-portal-iiitu"
      },
      {
        name: "WhatsApp Rooms",
        image: "/assets/p1.JPG",
        city: "Warsaw",
        country: "Poland",
        rating: "4.5",
        testimoni:
          "A chat app like discord/slack rooms, inspired from whatsapp web, built on React and Firebase and Google Auth.",
        link: "https://github.com/joharikushagra/my-chat"
      },
      {
        name: "Shortlyy",
        image: "/assets/p3.JPG",
        city: "Warsaw",
        country: "Poland",
        rating: "4.5",
        testimoni:
          "Url Shortener app built on ReactJs which makes your work of trimming urls extremely easy",
        link: "https://github.com/joharikushagra/shortly"
      },
      {
        name: "Meta Scrapper",
        image: "/assets/p5.JPG",
        city: "Warsaw",
        country: "Poland",
        rating: "4.5",
        testimoni:
          "A light weight meta-data scrapper built on Node.Js enables you to collect data by entering Url",
          link: "https://www.npmjs.com/package/metadata-scrapper"
      },
      {
        name: "Bloggy",
        image: "/assets/p4.JPG",
        city: "Warsaw",
        country: "Poland",
        rating: "4.5",
        testimoni:
          "Frontend only prototype of blog website, built with React and Redux for store management.",
          link: "https://github.com/joharikushagra/bloggy"
      },
    ],
  }) => {
    const settings = {
      dots: true,
      customPaging: function (i) {
        return (
          <a className="">
            <span className="mx-2 rounded-l-full rounded-r-full h-4 w-4 block cursor-pointer transition-all "></span>
          </a>
        );
      },
      dotsClass: "slick-dots w-max absolute mt-20  ",
      infinite: true,
      speed: 500,
      slidesToShow: 3,
      slidesToScroll: 2,
      responsive: [
        {
          breakpoint: 770,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            initialSlide: 2,
          },
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
          },
        },
      ],
    };
    const [sliderRef, setSliderRef] = useState(null);
  
    return (
      <>
        <Slider
          {...settings}
          arrows={false}
          ref={setSliderRef}
          className="flex items-stretch justify-items-stretch"
        >
          {listTestimoni.map((listTestimonis, index) => (
            <div className="px-3 flex items-stretch" key={index}>
              <div className="border-2 border-gray-500 hover:border-orange-500 transition-all rounded-lg p-8 flex flex-col">
                <div className="flex flex-col xl:flex-row w-full items-stretch xl:items-center">
                  <div className="flex order-2 xl:order-1">
                    <Image
                      src={listTestimonis.image}
                      height={200}
                      width={300}
                      alt="Icon People"
                    />
                    {/* <div className="flex flex-col ml-5 text-center">
                    </div> */}
                  </div>
                  {/* <div className="flex flex-none items-center ml-auto order-1 xl:order-2"></div> */}
                </div>
                <p className="text-lg text-black-600 mt-10 capitalize">
                  {listTestimonis.name}
                </p>
                <p className="mt-5 text-left">{listTestimonis.testimoni}</p>
                {
                  index==3 ? (
                <p style={{color:'rgba(245, 56, 85, var(--tw-bg-opacity)'}}><Link href={`${listTestimonis.link}`} target="_blank">Visit Npmjs</Link></p>
                  ) : (
                <p style={{color:'rgba(245, 56, 85, var(--tw-bg-opacity)'}}><Link href={`${listTestimonis.link}`} target="_blank">Github</Link></p>
                  )
                }
              </div>
            </div>
          ))}
        </Slider>
        <div className="flex w-full items-center justify-end">
          <div className="flex flex-none justify-between w-auto mt-14">
            <div
              className="mx-4 flex items-center justify-center h-14 w-14 rounded-full bg-white border-orange-500 border hover:bg-orange-500 hover:text-white-500 transition-all text-orange-500 cursor-pointer"
              onClick={sliderRef?.slickPrev}
            >
              <ArrowBack className="h-6 w-6 " />
            </div>
            <div
              className="flex items-center justify-center h-14 w-14 rounded-full bg-white border-orange-500 border hover:bg-orange-500 hover:text-white-500 transition-all text-orange-500 cursor-pointer"
              onClick={sliderRef?.slickNext}
            >
              <ArrowNext className="h-6 w-6" />
            </div>
          </div>
        </div>
      </>
    );
  };
  
  export default Testimoni;
  