import ReactPaginate from "react-paginate";
import { useRouter } from "next/router";
import Link from 'next/link'

const EpisodePager = ({ episodedata, config, showdata }) => {
    const router = useRouter()

    const handlePagination = page => {
        const path = router.pathname
        const query = router.query
        query.page = page.selected + 1
        router.push({
          pathname: path,
          query: query,
        })
      }

    return (
        <div className="episode_pages col-md-9 col-sm-12">
            <div className="show_episodes">
                {episodedata.data.map((episode) => (
                <div key={episode.attributes.Slug} className="episode">
                    <div className="episode_title" id ={episode.Title}>
                        <Link href={episode.attributes.podcast_sery.data.attributes.Slug + "/episodes/" + episode.attributes.Slug}>{episode.attributes.Title}</Link>
                    </div>
                    <div className="content-date">
                        {episode.attributes.publishedAt}
                    </div>
                    
                    <div className="episode_body" dangerouslySetInnerHTML={{ __html: episode.attributes.Description}}></div>
                </div>
                ))}
                <ReactPaginate
            marginPagesDisplayed={2}
            pageRangeDisplayed={5}
            previousLabel={"previous"}
            nextLabel={"next"}
            breakLabel={"..."}
            initialPage={episodedata.page}
            pageCount={episodedata.meta.pagination.pageCount}
            onPageChange={handlePagination}/>
            </div>
        </div>
    )
}
    
export default EpisodePager