import React from 'react';
import { Button, Col, Grid, Row, Table } from 'antd';
import { BackwardFilled, FastForwardFilled, FastBackwardFilled, PlayCircleFilled, PlayCircleOutlined, StepBackwardFilled, StepForwardFilled, HeartOutlined, ShareAltOutlined } from '@ant-design/icons';
import { ISong, SongProps } from '../models/IModels';
import styled from 'styled-components'

const Song = styled.div`
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 75%;`

export function CurrentTrack() {

  const song = {
    "id": "5",
      "song_name": "Кем я стал",
      "band_id": "3",
      "band_name": "DSPD",
      "albumid": "3",
      "album_name": "Album 3",
      "source": "source_path",
      "cover": "https://avatars.yandex.net/get-music-content/6058982/7e431a83.a.23910092-1/m1000x1000?webp=false",
      "playlists": [
          "3",
      ],
      genreid: "1",
      genre_name: "Rock",
      
  };
  
  return (
    <Song >
      <div className='current-track'>
        <Row className='w-full h-full bg-white opacity-80 rounded' style={{display: 'flex', alignItems: 'center'}}>
          <Col span={4} className='flex flex-direction-row justify-center'>
            <Button type='link' icon={<FastBackwardFilled className='player-button' />}></Button>
            <Button type="link" icon={<PlayCircleOutlined className='player-button' />}></Button>
            <Button type="link" icon={<FastForwardFilled className='player-button' style={{fontSize: 30}} />}></Button>
          </Col>
          <Col style={{width: 80}}>
            <img src={song.cover} alt={song.cover} className='current-song-cover' />
            
          </Col>
          <Col span={16}>
            <Row className='' style={{paddingLeft: 10}}>
              {song.song_name}
            </Row>
            <Row className='' style={{paddingLeft: 10}}>
              {song.band_name}
            </Row>
          </Col>
          <Col>
            <Button type='link' icon={<HeartOutlined  className='current-track-button'  />}></Button>
            <Button type='link' icon={<ShareAltOutlined  className='current-track-button'  />}></Button>
          </Col>
        </Row>

      </div>
      
    </Song>
  );
}


