import React from 'react'
import { VideoThumbnail } from './VideoThumbnail'

export type VideoFile = {
  file_id: string
  filename: string
  camera_name: string
  file_size_bytes: number
  created_at: string
  status: string
  format: string
  is_streamable?: boolean
  needs_conversion?: boolean
  metadata?: { duration_seconds: number; width: number; height: number; fps: number; codec: string }
}

export type VideoCardProps = {
  video: VideoFile
  onClick?: (video: VideoFile) => void
  showMetadata?: boolean
  className?: string
}

export const VideoCard: React.FC<VideoCardProps> = ({ video, onClick }) => {
  return (
    <div
      className={`bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow overflow-hidden ${onClick ? 'cursor-pointer' : ''}`}
      onClick={onClick ? () => onClick(video) : undefined}
    >
      <VideoThumbnail fileId={video.file_id} width={640} height={360} className="w-full h-auto" alt={video.filename} />
      <div className="p-4">
        <div className="text-sm text-gray-500 mb-1">{video.camera_name}</div>
        <div className="font-semibold text-gray-900 truncate" title={video.filename}>{video.filename}</div>
      </div>
    </div>
  )
}

export default VideoCard