import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
import { Tabs } from 'antd';
import React from 'react';
import { PlaylistsBlock } from './PlaylistsBlock';
import { IAlbum, IGenre, IPlaylist, ISong } from '../models/IModels';
import { SongsBlock } from './SongsBlock';
import { FullPlaylistBlock } from './FullPlaylistBlock';
import { width } from '@mui/system';

interface MenuBlockProps {
    playlists?: IPlaylist[],
    songs?: ISong[],
    albums?: IAlbum[],
    genres?: IGenre[],
}

export function MenuBlock({playlists, songs, albums, genres}: MenuBlockProps) {
    const chartTab = {
        label: 'Чарт',
        key: 'Chart',
        children: songs? <SongsBlock songs={songs}/> : null
    };
    const playlistsTab = {
        label: 'Плейлисты',
        key: 'Playlists',
        children: playlists && genres ? <FullPlaylistBlock {...{playlists, genres}}/> : null
    };
    const newSongsTab = {
        label: 'Новинки',
        key: 'New',
        children: songs? <SongsBlock songs={songs}/> : null
    };
    const tabs = [chartTab, playlistsTab, newSongsTab];

    return (
        <div className="flex " style={{display: 'flex', alignSelf: 'flex-start', width: 'fit-content'}}>
            <Tabs
                
                type="line"
                className='container flex justify-start '
                defaultActiveKey="Chart"
                items={tabs}
                style={{padding: '1%'}}
            />
        </div>
        
        
    );
}
