'use client';

import { observer } from 'mobx-react-lite';

import { useStores } from '@/app/(root)/AppProviders';
import SimpleSongListPage from '@/components/song/SimpleSongListPage';
import usePageViewLog from '@/hooks/usePageViewLog';
import { ContextType } from '@/logging/contextTypes';

const PAGE_SIZE = 20;
const FeedPage = observer(() => {
  const { social } = useStores();

  usePageViewLog({
    actionName: 'PageViewed',
    componentContext: 'feed',
  });

  return (
    <SimpleSongListPage
      loadContent={() =>
        social.fetchFollowingFeedPublishSongClips({
          pageSize: PAGE_SIZE,
        })
      }
      title='Following'
      playlistId='featured_feed_following'
      contextId='featured_feed_following'
      contextType={ContextType.FeaturedFeed}
    />
  );
});

export default FeedPage;