'use client';

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

import { AppointmentCards } from '../../constants/AppointmentCards';

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

//components
import ProfileCard from '../ProfileCard';

const ProfileCardContainer = () => {
  return (
    <section className={s.container}>
      <Swiper
        spaceBetween={-70}
        slidesPerView={1}
        //onSlideChange={() => console.log('slide change')}
        //onSwiper={(swiper) => console.log(swiper)}
      >
        {AppointmentCards.map((card) => (
          <article key={card.id}>
            <ProfileCard card={card} />
          </article>
        ))}
      </Swiper>
    </section>
  );
};

export default ProfileCardContainer;