'use client'

import React, { useEffect, useState } from 'react'
import TopNavThree from '@/components/Header/TopNav/TopNavThree'
import MenuJewelry from '@/components/Header/Menu/MenuJewelry'
import BannerTop from '@/components/Home3/BannerTop'
import SliderJewelry from '@/components/Slider/SliderJewelry'
import Quote from '@/components/Jewelry/Quote'
import Lookbook from '@/components/Jewelry/Lookbook'
import productData from '@/data/Product.json'
import FeaturedProduct from '@/components/Jewelry/FeaturedProduct'
import Newsletter from '@/components/Home4/Newsletter'
import Benefit from '@/components/Jewelry/Benefit'
import Brand from '@/components/Home1/Brand'
import Footer from '@/components/Footer/Footer'
import ModalNewsletter from '@/components/Modal/ModalNewsletter'
import SliderPet from '@/components/Slider/SliderPet'
import WhatNewOne from '@/components/Home1/WhatNewOne'
import TrendingProduct from '@/components/Home3/TrendingProduct'
import ChooseUs from '@/components/Pet/ChooseUs'
import Banner2 from '@/components/Pet/Banner2'
import FeatureProduct from '@/components/Pet/FeatureProduct'
import PopularProduct from '@/components/Watch/PopularProduct'
import Instagram from '@/components/Yoga/Instagram'
import Collection from '@/components/Pet/Collection'
import HotProduct from '@/components/Cosmetic3/HotProduct'
import Banner from '@/components/Pet/Banner'
import TabFeatures from '@/components/Pet/TabFeatures'
import { BaseURL } from '../../utils/BaseUrl'
import axios from 'axios'
import MenuOne from '@/components/Header/Menu/MenuOne'

export default function MainHome() {

  const [products, setProducts] = useState([])
  const [loading, setLoading] = useState(true)
  const [categories, setCategories] = useState([])

  useEffect(() => {
    fetchProducts()
    getCategory()
  }, [])

  const fetchProducts = async () => {
    try {
      const response = await axios.get(`${BaseURL}/products`)
      setProducts(response?.data?.data)
      setLoading(false)
    } catch (error) {
      console.error('Error fetching products:', error)
      setLoading(false)
    }
  }


  const getCategory = async () => {
    try {
      const res: any = await axios?.get(`${BaseURL}/categories`)
      setCategories(res?.data?.data)
    } catch (error) {
      console.log(error)
    }
  }

  if (loading) {
    return <div>Loading...</div>
  }
  console.log("product", products)
  return (
    <>
      <TopNavThree props="style-three bg-white" />
      <div id="header" className='relative w-full'>
         <MenuOne props="bg-transparent" />
        <BannerTop props="bg-black py-3" textColor='text-white' bgLine='bg-white' />
        <SliderPet />
      </div>
      {/* <Quote /> */}
      <Collection data={categories} start={0} limit={8} />
      <TrendingProduct data={products} start={0} limit={8} />
      <TabFeatures data={products} />
      <ChooseUs />
      <HotProduct data={products} />
      <Banner2 />
      <FeatureProduct data={products} category={categories} />
      <PopularProduct />
      <Benefit props="md:mt-20 mt-10 md:pt-20 pt-10 border-t border-line" />
      <Instagram />
      <Brand />

      <Footer />
      <ModalNewsletter />
    </>
  )
}
