import { SIZE_CHANGE } from '@/constant';
import type { ISizeType } from '@/types';
import { events, getGlobalSize } from '@/utils';
import { useEffect, useState } from 'react';

export function useSizeChange(props: { size?: ISizeType }) {
  const [size, setSize] = useState(getGlobalSize);

  useEffect(() => {
    events.on(SIZE_CHANGE, (temp: ISizeType) => {
      setSize(temp);
    });

    return () => {
      events.off(SIZE_CHANGE, setSize);
    };
  }, []);

  return {
    size: props?.size ?? size,
    setSize,
  };
}