import type { ReactNode } from 'react';
import { useLayoutEffect } from 'react';
import { useHeaderStore } from '../stores/header/useHeaderStore.js';

export function useHeader(title: string, action?: ReactNode) {
  const { setTitle, setAction } = useHeaderStore((state) => state);

  useLayoutEffect(() => {
    const removeTitle = setTitle(title);
    const removeAction = action ? setAction(action) : undefined;
    return () => {
      removeTitle();
      if (removeAction) {
        removeAction();
      }
    };
  }, [setTitle, setAction, action, title]);
}