import React from 'react';
import {formatDuration} from './utils.js';

export default function Playlist(props) {
  const {tracks} = props
  if (!tracks) {
    return null;
  }
  if (!Array.isArray(tracks)) {
    return <div className="Playlist-error">{tracks}</div>;
  }
  return (
    <table className="Playlist"><tbody>
      {tracks.map((track, i) => (
      <tr key={i} className={ i === props.activeTrack ? "Playlist-active" : "" }>
        <td>{track.no}</td>
        <td>{track.title}</td>
        <td>{track.artist}</td>
        <td>{track.year}</td>
        <td>{track.album}</td>
        <td>{track.bit_rate} kbps</td>
        <td>{formatDuration(track.duration)}</td>
        <td><button onClick={() => props.onActivateTrack(i)}>play</button></td>
      </tr>))}
    </tbody></table>
  )
}