// utils/storage.js
export function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

// In your component
const [chatMode, setChatMode] = useLocalStorage(STORAGE_KEY, "chat");

const TOOLTIP_DELAY = 700;

// In your function
setTimeout(() => {
  setShowTooltip(true);
}, TOOLTIP_DELAY);

function getTooltipText(chatMode) {
  return `You are currently in ${chatMode} mode. Click to switch to ${
    chatMode === "chat" ? "query" : "chat"
  } mode.`;
}

// In your component
<div className={`opacity-${showToolTip ? 1 : 0} ...`}>
  {getTooltipText(chatMode)}
</div>

function cleanupTooltipListener(delayHandler, setShowTooltip) {
  clearTimeout(delayHandler);
  setShowTooltip(false);
}

// In your component
onMouseLeave={() => cleanupTooltipListener(delayHandler, setShowTooltip)}