import React,{useState,useEffect} from "react";
import Layout from '../components/Layout'
import { Carousel } from "react-responsive-carousel";
import stylesCarousel from "react-responsive-carousel/lib/styles/carousel.min.css";
import HomeStyles from '../styles/Home.module.css'
import HomePackages from "../components/HomePackages";
import HomeInternationalDestination from "../components/HomeInternationalDestination";
import HomeTheme from "../components/HomeTheme";
import HomeBlog from "../components/HomeBlog";
import Image from 'next/image'
function Home({homebanner,homepackage,destination,themes,blogs}) {
  const banner = [];
  homebanner.homebannerDetail.map((ban,i)=>{
    banner.push({
        image : ban.image,
        caption : '<div >'+ban.banner_text+'<div>'+' <p>'+ban.banner_text1+' </p>'
    })
  })
const captionStyle = {
  fontSize: '2em',
  fontWeight: 'bold',
}
const slideNumberStyle = {
  fontSize: '20px',
  fontWeight: 'bold',
}
  return (
    <div >
      
        <Layout title="Home Page">
        <div style={{ textAlign: "center" }} id={HomeStyles.carousel2}>
          <div style={{
            padding: "0px"
          }}>
          <Carousel 
          showArrows={true} 
          infiniteLoop={true}
          // autoPlay={true}
          interval={1000}
          >
          {
            banner && banner.map((item,i)=>
              <div key={i}>
                  <Image src={item.image} alt="image" height="100" width="100" />
                      </div>
            
            )
              
          }
              
          </Carousel>
                
              </div>
            </div>

          <HomePackages homepackage={homepackage}/>
          <HomeInternationalDestination destination={destination}/>
          <HomeTheme themes={themes}/>
          <HomeBlog blogs={blogs}/>
        </Layout>
    </div>
  )
}
export async function getServerSideProps() {
  const res1 = await fetch(`https://www.tripsgateway.com/api/apionly/home-banner`)
  const homebanner = await res1.json()

  const res2 = await fetch(`https://www.tripsgateway.com/api/apionly/home-trending-packages`)
  const homepackage = await res2.json()

  const res3 = await fetch(`https://www.tripsgateway.com/api/apionly/home-destination`)
  const destination = await res3.json()

  const res4 = await fetch(`https://www.tripsgateway.com/api/apionly/home-themes`)
  const themes = await res4.json()

  const res5 = await fetch(`https://www.tripsgateway.com/api/apionly/home-blogs`)
  const blogs = await res5.json()
     
  return {
    props :{
      homebanner,
      homepackage,
      destination,
      themes,
      blogs,
    }
  }
}
export default Home