'use client';
import dynamic from 'next/dynamic';
import { useSearch } from './search-context';

const SearchDialog = dynamic(() => import('./search-dialog').then((m) => m.SearchDialog), { ssr: false });

/** Loads the search dialog bundle only once the user opens it (or has opened it before in this session). */
export function SearchContainer() {
  const { open } = useSearch();
  const [everOpened, setEver] = useStateOnce(open);
  if (!everOpened) return null;
  void setEver;
  return <SearchDialog />;
}

import { useEffect, useState } from 'react';
function useStateOnce(flag: boolean) {
  const [v, setV] = useState(flag);
  useEffect(() => {
    if (flag) setV(true);
  }, [flag]);
  return [v, setV] as const;
}