import React from 'react'

import { CachedImageWithFallback } from '../components/CachedImageWithFallback'
import { VideoListItemFieldsFragment } from '../graphql/__generated__/sdk'

export const VideoImage: React.FC<{
  item: VideoListItemFieldsFragment
  width?: number
  height?: number
}> = ({ item, width, height }) => (
  <CachedImageWithFallback
    style={{
      width: width ?? 64,
      height: height ?? 64,
    }}
    uris={item?.thumbnails?.high?.url ? [item.thumbnails.high.url] : []}
    cacheKey={item.id}
    gradientString=""
  />
)