'use client';

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

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

//components
import ReccommendedSalonCard from '../ReccommendedSalonCard';
import Title from '../Title';

//api
import { useFetchReccommendedSalons } from '@/api/useFetchReccommendedSalons';

const ReccommendedContainer = () => {
  const router = useRouter();

  const { data: recommendedSalons, isLoading } = useFetchReccommendedSalons();

  if (isLoading) <div>Loading...</div>;

  return (
    <section>
      <Title text={'Preporuke'} />
      <div className={s.reccommendedContainer}>
        <Swiper
          width={275}
          //onSlideChange={() => console-.log('slide change')}
          //onSwiper={(swiper) => console.log(swiper)}
        >
          {recommendedSalons?.map((recommendedSalons) => (
            <SwiperSlide key={recommendedSalons.id}>
              <li onClick={() => router.push(`/salon/${recommendedSalons.id}`)}>
                <ReccommendedSalonCard salon={recommendedSalons} />
              </li>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </section>
  );
};

export default ReccommendedContainer;