import React, {useState} from 'react'
import { List } from 'semantic-ui-react'

function getStatus(status) {
  switch(status) {
    case 0:
      return 'Padding'
    case 1:
      return 'Downloading'
    case 2:
      return 'Finish'
    case -1:
      return 'Fail'
    default:
      return 'Unknown'
  }
}

function DownloadItem (props) {
  // console.log('render item ::::: ')
  return (
    <List.Item>
      <List.Content>
        <List.Header>{props.url}</List.Header>
        <List.Description><a href={props.mp3} target="_blank">{props.mp3}</a> / {getStatus(props.status)}</List.Description>
      </List.Content>
    </List.Item>
  )
}

export default DownloadItem