"use client";
import Navbar from "@comp/Navbar/page";
import Footer from "@comp/Footer/page";
import HeroSection from "@comp/LandingPage/HeroSection/page";
import SurpriseSection from "@comp/LandingPage/SurpriseSection/page";
import BetweenSexualSection from "@comp/LandingPage/BetweenSexualSection/page";
import BrandsLogoSection from "@comp/LandingPage/BrandsLogoSection/page";
import BeautySection from "@comp/LandingPage/BeautySection/page";
import HomeSection from "@comp/LandingPage/HomeSection/page";
import { useEffect, useState } from "react";

export default function Page() {
  const [specialOfferData, setSpecialOfferData] = useState([]);
  const [cosmeticData, setCosmeticData] = useState([]);
  const [HomeCosmeticData, setHomeCosmeticData] = useState([]);
  const fetchSpecialOffer = async () => {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/product?page=0&specialOffer=true`
    );
    const specialOffer = await res.json();
    setSpecialOfferData(specialOffer);
  };

  const fetchCosmetic = async () => {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/product?page=0&categoryId=553af942-7a14-4757-9a03-a3ebec6c865a`
    );
    const Cosmetic = await res.json();
    setCosmeticData(Cosmetic);
  };

  const fetchHomeCosmetic = async () => {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/product?page=0&categoryId=effe5d98-d4b7-47e1-9bfb-4d3c77ab3347`
    );
    const HomeCosmetic = await res.json();
    setHomeCosmeticData(HomeCosmetic);
  };

  useEffect(() => {
    fetchSpecialOffer();
    fetchCosmetic();
    fetchHomeCosmetic();
  }, []);
  return (
    <>
      <div className="bg-header">
        <Navbar theme={0} />
        <HeroSection />
      </div>
      <SurpriseSection data={specialOfferData} />
      <BetweenSexualSection />
      <BrandsLogoSection />
      <BeautySection data={cosmeticData} />
      <HomeSection data={HomeCosmeticData} />
      <Footer />
    </>
  );
}
