"use client";

import React, { createContext, useContext, useState } from "react";

type ExploreReelsUiContextValue = {
  chromeHidden: boolean;
  setChromeHidden: (hidden: boolean) => void;
  actionsExpanded: boolean;
  setActionsExpanded: (expanded: boolean) => void;
};

const ExploreReelsUiContext = createContext<ExploreReelsUiContextValue | null>(
  null
);

export function ExploreReelsUiProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [chromeHidden, setChromeHidden] = useState(false);
  const [actionsExpanded, setActionsExpanded] = useState(true);

  return (
    <ExploreReelsUiContext.Provider
      value={{
        chromeHidden,
        setChromeHidden,
        actionsExpanded,
        setActionsExpanded,
      }}
    >
      {children}
    </ExploreReelsUiContext.Provider>
  );
}

export function useExploreReelsUi() {
  return useContext(ExploreReelsUiContext);
}
