import { IPlaylist } from "../models/IModels";

import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';

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

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { table } from "console";
import Title from "antd/es/typography/Title";

export function PlaylistsBlock({playlists}: {playlists: IPlaylist[]}) {

    return (
        <div className="container mx-auto bg-slate-300" style={{height: 300, width: '75%'}}>
            <Swiper
                modules={[Navigation, Pagination, Scrollbar, A11y]}
                spaceBetween={50}
                slidesPerView={4}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSlideChange={() => console.log('slide change')}
                loop>
                {playlists.map((p: IPlaylist) => (
                    <SwiperSlide key={p.id}>
                        <div id="playlists" className="flex items-center mx-auto justify-center">
                            <div id="playlist">
                                <img src={p.cover} alt={p.name} className="h-full w-auto rounded m-auto" />
                            </div>
                            <Title level={5} className="text-lg text-center">{p.name}</Title>
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>

            
        </div>
        
        
    )
}

