import React from 'react';
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';

//import testImage from '../../../public/images/image3.jpg';
import { cards } from '../../constants/cards';

//styles
import s from './SalonGalery.module.scss';
import 'swiper/scss';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

const SalonGalery = () => {
  return (
    <section>
      <div className={s.galeryContainer}>
        <Swiper
          modules={[Pagination]}
          slidesPerView={1}
          spaceBetween={5}
          pagination={{ clickable: true }}

          //onSlideChange={() => console-.log('slide change')}
          //onSwiper={(swiper) => console.log(swiper)}
        >
          {cards.map((card) => (
            <SwiperSlide key={card.id}>
              <Image
                className={s.cardImage}
                height={236}
                src={card.image}
                alt="User Icon"
                placeholder="blur"
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </section>
  );
};

export default SalonGalery;