import { useContext, useLayoutEffect } from 'react';
import {
  ListItemContext,
  type ListItemContextData,
  type ListItemMediaSize,
} from './ListItemContext';

export function useListItemMedia(size?: ListItemMediaSize) {
  const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);

  useLayoutEffect(() => {
    setMediaSize(size);
  }, [size, setMediaSize]);

  return { mediaSize, setMediaSize };
}