'use client'
import { IMovieCardItem } from "@/app/Search/MovieCard";
import { PropsWithChildren, createContext, useState } from "react";

interface IFavoriteContext {
  favorites: Array<IMovieCardItem>
  setFavorites: (value: Array<IMovieCardItem>) => void
}
export const FavoriteContext = createContext<IFavoriteContext>({
  favorites: [],
  setFavorites: (_value: Array<IMovieCardItem>) => { },
});

// Using interleaving to render this context provider client-side, but still utilize server-side renderung for children components
export const FavoriteProvider = ({ children }: PropsWithChildren) => {
  const [favorites, setFavorites] = useState<Array<IMovieCardItem>>([])
  return (
    <FavoriteContext.Provider value={{ favorites, setFavorites }}>{children}</FavoriteContext.Provider>
  )
}