import { MediaList } from '../components/MediaList';
import { useJellyfinTracksData } from '../hooks/Jellyfin/Infinite/useJellyfinTracksData';
import { usePullToRefresh } from '../hooks/usePullToRefresh';
import { InlineLoader } from '../components/InlineLoader';

export const Tracks = () => {
    const { items, infiniteData, isLoading, error, reviver, loadMore, refetch } = useJellyfinTracksData();
    const { containerRef, isRefreshing } = usePullToRefresh({ onRefresh: refetch });

    return (
        <div className="tracks-page">
            {isRefreshing && <InlineLoader />}
            {error && <div className="error">{error}</div>}
            <MediaList
                items={items}
                infiniteData={infiniteData}
                isLoading={isLoading}
                reviver={reviver}
                type="song"
                loadMore={loadMore}
                title={'Tracks'}
            />
        </div>
    )
}