import React from 'react'

const videoPreviewStyle = {
  width: 145,
  height: 145,
  objectFit: 'cover',
  display: 'block',
  backgroundColor: '#eaf7ff',
}

const videoTitleStyle = {
  maxWidth: 145,
  marginTop: 8,
  fontSize: 12,
  textAlign: 'center',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
}

export const VideoMediaItem = ({ id, title, thumbnailUrl, url }) => {
  const previewUrl = thumbnailUrl || url
  return (
    <div>
      {previewUrl ? (
        <img src={previewUrl} alt={title || `Video ${id || ''}`} style={videoPreviewStyle} />
      ) : (
        <div style={videoPreviewStyle} />
      )}
      <div style={videoTitleStyle} title={title}>
        {title || `ID: ${id || '-'}`}
      </div>
    </div>
  )
}