import React, { useEffect, useState } from "react"
import { Offer } from "credify-web-sdk"
import testData from "../home/data.json"
import Slider from "react-slick"
import styles from "./styles.module.css"
import "slick-carousel/slick/slick.css"
import "slick-carousel/slick/slick-theme.css"
import { OfferItem } from "../../components/OfferItem"
import { NextArrow, PrevArrow } from "../../components/Arrow"

function TestPage() {
  const [offers, setOffers] = useState<Offer[] | null>(null)
  var settings = {
    slidesToShow: 3,
    slidesToScroll: 1,
    infinite: false,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
  }

  useEffect(() => {
    setOffers(testData as Offer[])
  }, [])

  if (!offers) {
    return null
  }

  return (
    <div className={styles.container}>
      <Slider {...settings}>
        {offers?.map((item) => (
          <div>
            <OfferItem key={item.id} data={item} onOfferClick={() => {}} />
          </div>
        ))}
      </Slider>
    </div>
  )
}

export default TestPage