import {MyIcon} from '@components/MyIcon';
import {MyScreenContainer} from '@components/MyScreenContainer';
import {View} from 'react-native';
import {Text, TouchableOpacity} from 'react-native';

export function Help() {
  return (
    <MyScreenContainer>
      <Item icon="bug-report" title="Report a problem" onPress={() => {}} />
      <Item icon="contact-support" title="Help Center" onPress={() => {}} />
    </MyScreenContainer>
  );
}

export interface ItemProps {
  icon: string;
  title: string;
  value?: string;
  onPress?: () => void;
}

export function Item({icon, title, value, onPress}: ItemProps) {
  return (
    <TouchableOpacity
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#26263f',
        borderRadius: 10,
        padding: 12,
        marginTop: 12,
      }}
      disabled={!onPress}
      onPress={onPress}>
      <View style={{flexDirection: 'row', gap: 12, alignItems: 'center'}}>
        <MyIcon name={icon} size={36} />
        <View>
          {value ? (
            <>
              <Text>{title}</Text>
              <Text style={{color: '#fff', fontWeight: 'bold', fontSize: 16}}>
                {value}
              </Text>
            </>
          ) : (
            <Text style={{color: '#fff', fontWeight: 'bold', fontSize: 16}}>
              {title}
            </Text>
          )}
        </View>
      </View>
    </TouchableOpacity>
  );
}
