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

export default class NewItemCardComponent 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://img12.jd.id/Indonesia/s202x202_/nHBfsgAAoQAAABMADp8gVwAPqRY.jpg.webp",
            name:"Raa Cha Suki & BBQ - Voucher Value Rp 100.000",
            price:"90.000"
        },
        {
            image:"https://img13.jd.id/Indonesia/s202x202_/nHBfsgAAcQAAABkAF57sQQAPIcE.jpg.webp",
            name:"Gokana Ramen & Teppan - Voucher Value Rp 100.000",
            price:"90.000"
        },
        {
            image:"https://img10.jd.id/Indonesia/s202x202_/nHBfsgAAEwAAABkAFtWOJgABokU.jpg.webp",
            name:"KFC Voucher Value Rp 50.000",
            price:"45.000"
        },
        {
            image:"https://img10.jd.id/Indonesia/s202x202_/nHBfsgAAagAAAAkAG0QyjQAGIe0.jpg.webp",
            name:"BOGA Group Voucher Value Rp 100.000",
            price:"90.000"
        },
        {
            image:"https://img12.jd.id/Indonesia/s202x202_/nHBfsgAA2gAAAAgACQTXGQANpmI.jpg.webp",
            name:"Chopstix - Voucher Value Rp 100.000",
            price:"80.000"
        },
        {
            image:"https://img10.jd.id/Indonesia/s202x202_/nHBfsgAAGQAAABgAEKAtKQABhS0.jpg.webp",
            name:"Lotteria - Chicken Mix Set A",
            price:"37.400"
        }
    ];
    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>
    );
  }
}