import React, { Component } from "react";
import Slider from "react-slick";

export default class PopularItemCardComponent extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: false,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 4,
      initialSlide: 0,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            initialSlide: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    };
    
    const data = [
        {
            image:"https://img13.jd.id/Indonesia/s202x202_/nHBfsgAAggAAABoABFM3nAAEXbA.jpg.webp",
            name:"Sharetea - Avocado Cocoa Rocksalt & Cheese Large Size",
            price:"21.000"
        },
        {
            image:"https://img14.jd.id/Indonesia/s202x202_/nHBfsgAAIQAAAAMADA5mOgAEk8c.png.webp",
            name:"Tiket Masuk Ocean Dream Samudra - Annual Pass",
            price:"170.000"
        },
        {
            image:"https://img11.jd.id/Indonesia/s202x202_/nHBfsgAAuAAAAAkAA3z7VgAHUxo.jpg.webp",
            name:"Sharetea - Avocado Cocoa Rocksalt & Cheese Large Size",
            price:"90.000"
        },
        {
            image:"https://img20.jd.id/Indonesia/s202x202_/nHBfsgAAFgAAABwACxRf5gACNwE.jpg.webp",
            name:"YOSHINOYA - Value Voucher Rp 100.000",
            price:"90.000"
        },
        {
            image:"https://img13.jd.id/Indonesia/s202x202_/nHBfsgAATwAAABUABZrMEQAFL3g.jpg.webp",
            name:"Fitness One - Membership 1 Bulan (Value Rp 625.000)",
            price:"21.000"
        },
        {
            image:"https://img10.jd.id/Indonesia/s202x202_/nHBfsgAAEQAAAAYABowcXAACSis.png.webp",
            name:"Tiket Dunia Fantasi Ancol - Annual Pass (Bebas Main 1 Tahun)",
            price:"325.000"
        },
        {
            image:"https://img12.jd.id/Indonesia/s202x202_/nHBfsgAAtAAAAAYAAhB8RwAFsSU.png.webp",
            name:"Waterbom PIK - All Day Pass Ticket",
            price:"88.000"
        },
        {
            image:"https://img11.jd.id/Indonesia/s202x202_/nHBfsgAA0wAAAAsAAgIg7AADiWM.jpg.webp",
            name:"Kompas - Digital Premium 12 bulan",
            price:"339.000"
        },
    ];
    return (
      <div>
        <Slider {...settings}>
          {
              data.map(it=>{
                  return(
                    <div>
                        <div style={{textAlign:'center',padding:10}}>
                            <img src={it.image} style={{marginLeft:'auto',marginRight:'auto'}} height={'200vh'} width={'100%'} />
                            {it.name}
                            <br/>
                            <span style={{color:'#0061a7'}}>Rp. {it.price}</span>
                        </div>
                    </div>
                  );
              })
          }
        </Slider>
      </div>
    );
  }
}