import React from 'react'
import { View, StyleSheet, TouchableOpacity } from 'react-native'

import { colors } from '../Colors'

const containerHeights = {
  small: 78,
  large: 96,
}

const Styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignContent: 'center',
    paddingHorizontal: 8,
    marginVertical: 2,
    borderRadius: 4,
    borderColor: colors.metals.metal2,
  },
})

export const ListItemContainer: React.FC<{
  onPress?: () => void
  size?: 'small' | 'large'
}> = ({ children, size = 'large', onPress }) => (
  <TouchableOpacity onPress={onPress} disabled={!onPress}>
    <View
      style={[
        Styles.container,
        { height: containerHeights[size] },
        onPress ? { backgroundColor: colors.metals.metal3 } : null,
      ]}
    >
      {children}
    </View>
  </TouchableOpacity>
)