'use client';

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';

import { reviewCards } from '@/constants/reviewCards';

//styles
import s from './ReviewContainer.module.scss';
import 'swiper/scss';

//components
import ReviewCard from '../ReviewCard';

const ReviewContainer = () => {
  return (
    <section className={s.reviewContainer}>
      <Swiper
        width={275}
        spaceBetween={20}
        //onSlideChange={() => console-.log('slide change')}
        //onSwiper={(swiper) => console.log(swiper)}
      >
        {reviewCards.map((card) => (
          <SwiperSlide key={card.id}>
            <article>
              <ReviewCard reviewCard={card} />
            </article>
          </SwiperSlide>
        ))}
      </Swiper>
    </section>
  );
};

export default ReviewContainer;