import { MediaList } from '../components/MediaList'
import { useFilterContext } from '../context/FilterContext/FilterContext'
import { useJellyfinFavoritesData } from '../hooks/Jellyfin/Infinite/useJellyfinFavoritesData'
import { usePageTitle } from '../context/PageTitleContext/PageTitleContext';
import { useEffect } from 'react';

export const Favorites = () => {
    const { setPageTitle } = usePageTitle();
    const { items, infiniteData, isLoading, error, reviver, loadMore } = useJellyfinFavoritesData()
    const { jellyItemKind } = useFilterContext()
    
    useEffect(() => {
        setPageTitle('Favorites');
    }, [setPageTitle]);

    return (
        <div className="favorites-page">
            {error && <div className="error">{error}</div>}
            <MediaList
                items={items}
                infiniteData={infiniteData}
                isLoading={isLoading}
                type={jellyItemKind === 'Audio' ? 'song' : jellyItemKind === 'MusicAlbum' ? 'album' : 'artist'}
                reviver={reviver}
                loadMore={loadMore}
                title={'Favorites'}
            />
        </div>
    )
}