'use client';

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

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

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

//components
import ChooseSalonCard from '../ChooseSalonCard';
import { SalonLanding } from '@/types/salon';

const ÇhooseSalonContainer = () => {
  const router = useRouter();

  const { data: salons, isLoading } = useFetchLandingSalons();

  if (isLoading) <div>Loading...</div>;
  return (
    <section className={s.chooseContainer}>
      <Swiper
        spaceBetween={-70}
        slidesPerView={1}
        //onSlideChange={() => console.log('slide change')}
        //onSwiper={(swiper) => console.log(swiper)}
      >
        {salons?.map((salon: SalonLanding) => (
          <article className={s.chooseContainer} key={salon.id}>
            <div onClick={() => router.push(`/salon/${salon.id}`)}>
              <ChooseSalonCard salon={salon} />
            </div>
          </article>
        ))}
      </Swiper>
    </section>
  );
};

export default ÇhooseSalonContainer;