import { Link } from 'react-router-dom'
import type { FeedVideoDto } from '../api/client'
import { formatDuration, formatRelativeTime } from '../utils/format'
import DownloadButton from './DownloadButton'

interface Props {
  video: FeedVideoDto
}

function VideoCard({ video }: Props) {
  const duration = formatDuration(video.duration_seconds)
  const href = `/video/${video.youtube_video_id}`

  return (
    <li className="video-card">
      <Link to={href} className="video-thumbnail">
        {video.thumbnail_url ? (
          <img src={video.thumbnail_url} alt={video.title} />
        ) : (
          <div className="video-thumbnail-placeholder" />
        )}
        {duration && <span className="duration-badge">{duration}</span>}
      </Link>
      <div className="video-info">
        <Link to={href} className="video-title" title={video.title}>
          {video.title}
        </Link>
        <div className="video-meta">
          {video.channel.title} · {formatRelativeTime(video.published_at)}
        </div>
        <div className="video-actions">
          <Link to={href} className="button-link">
            Смотреть
          </Link>
          <DownloadButton video={video} />
        </div>
      </div>
    </li>
  )
}

export default VideoCard