import React from 'react'
import { View, StyleSheet, TouchableOpacity } from 'react-native'
import { colors } from '../Colors'

const listItemHeight = 96

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

export const ListItemContainer: React.FC<{ onPress?: () => void }> = ({
  children,
  onPress,
}) => (
  <TouchableOpacity onPress={onPress} disabled={!onPress}>
    <View
      style={[
        Styles.container,
        onPress ? { backgroundColor: colors.mutedGray } : null,
      ]}
    >
      {children}
    </View>
  </TouchableOpacity>
)