import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { Filtered } from './section-playlists-filtered';
import { Adds } from './section-playlists-latest-adds';
import { Top } from './section-playlists-top';
import { Removals } from './section-playlists-latest-removals';
import { Header } from './section-header';
import { Pills } from './section-playlists-pills';

type TProps = {};

export const TrackPlaylists: React.FC<TProps> = () => {
  // goToTrackList = provider => () => {
  //   // Router.goTo(ROUTES.playlists, { provider });
  //   Router.goTo(ROUTES.playlists, { provider });
  // };

  // goToPlaylistplacement = playlistPlacementParams => {
  //   Router.goTo(ROUTES.playlistplacement, playlistPlacementParams);
  // };

  // const {
  //   /*visibility /*, playlists*/
  // } = this.props;

  return (
    <>
      <SBox position="relative" width={1} bg="ebonyClay">
        <Header />

        <>
          <Pills />
          <Filtered />
          <Adds />
          <Removals />
          <Top />
        </>
      </SBox>
    </>
  );
};