import React, { useEffect, useState } from 'react';
import { render } from '@testing-library/react';
import {ISong} from '../../models/IModels';
import { Track } from '../songComponents/Track';
import axios from 'axios';
import { Table, Button, Empty } from 'antd';
import { PlayCircleFilled, PlayCircleOutlined } from '@ant-design/icons';


export function SongsBlock({songs}: {songs: ISong[]}) {

  const columns = [
    {
      title: '',
      dataIndex: 'play',
      key: 'play',
      width: 100,

      render: (text: string, song: ISong) => (
        <Button data-content={
          <PlayCircleFilled />
        } className='play-song-button rounded' style={{background: 'transparent', display: 'contents'}}>
          <img 
            className="rounded" 
            src={song.cover} 
            alt={song.song_name} 
          />
        </Button>
        
        
      ),
    },
    {
      title: '',
      dataIndex: 'song_name',
      key: 'song_name',
      width: 400
    },
    {
      title: '',
      dataIndex: 'band_name',
      key: 'band_name',
      width: 400
    },
    {
      title: '',
      dataIndex: 'album_name',
      key: 'album_name',
      width: 400
    },

  ]

  return (
    <div className="song-block flex bg-white border-solid border-2 border-slate-100">
      
      <Table
        style={{width: '100%' }}
        className="songs-table"
        dataSource={songs.map((s: ISong) => ({...s, play: ''}))}
        columns={columns}
        showHeader={false}
        pagination={false}
        rowClassName={() => 'song-table-row'}
      />
    </div>
  );    
};


