import React from 'react'
import { View, ViewStyle } from 'react-native'

import { ProductImageFieldsFragment } from '../graphql/__generated__/sdk'
import { ProductImage } from './ProductImage'

const stylesPerSize = {
  small: {
    width: 48,
    height: 48,
    marginRight: 8,
  },
  large: {
    width: 64,
    height: 64,
    marginRight: 24,
  },
}

export const ListProductImage: React.FC<{
  product: ProductImageFieldsFragment
  size?: 'small' | 'large'
  isExplicit: boolean
  rank?: number
  style?: ViewStyle
}> = ({ product, size = 'large', style, ...props }) => (
  <View
    style={[
      {
        flex: 1,
        marginLeft: 8,
        alignSelf: 'center',
      },
      stylesPerSize[size],
      style,
    ]}
  >
    <ProductImage
      size={stylesPerSize[size].width}
      product={product}
      {...props}
    />
  </View>
)