import { Grid, Col, Row, Button } from 'antd';
import { PlayCircleOutlined } from '@ant-design/icons';
import React from 'react';
import { ISong, SongProps } from '../models/IModels';

export function Track({ song }: SongProps) {
  return (
    <span className="flex items-center justify-between p-4 px-6 py-2 border-b border-gray-300 ">
      <Row>
        <Col span={4}>
          <Button type="link"><PlayCircleOutlined /></Button>
        </Col>
        <Col span={4} className="flex items-center justify-between">
          <img src={song.cover} alt={song.song_name} className='list-image-none' />
        </Col>
        <Col span={8} className="flex items-center justify-between">
          <p className="text-md">{song.song_name}</p>
        </Col>
        <Col span={8} className="flex items-center justify-between">
          <p className="text-md">{song.band_name}</p>
        </Col>
      </Row>
    </span>
  )
}
