import React from 'react'

import { colors } from '../Colors'

import { Playlist } from '../types/Playlist'
import { CachedImageWithFallback } from './CachedImageWithFallback'

export const PlaylistImage: React.FC<{
  playlist: Playlist
  imageSize: number
}> = ({ playlist, imageSize }) => (
  <CachedImageWithFallback
    key={playlist.image?.uri}
    uris={playlist.image?.uri ? [playlist.image.uri] : []}
    cacheKey={playlist.sonyPlaylistId}
    gradientString={playlist.name}
    style={{
      backgroundColor: colors.gray,
      borderRadius: 8,
      marginRight: 18,
      aspectRatio: 1,
      height: imageSize,
      width: imageSize,
    }}
  />
)