import React from 'react';
import {Pressable, View} from 'react-native';
import {Icon as IconType, IconChevronRight} from '@tabler/icons-react-native';
import {Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  label: string;
  value?: string;
  onPressItem: () => void;
  Icon?: IconType;
}

function ConfigurationItem({label, value, Icon, onPressItem}: Props) {
  const {theme, iconSizes} = useTheme();
  return (
    <Pressable onPress={onPressItem} style={styles.container}>
      <View style={styles.contentContainer}>
        {!!Icon && (
          <View
            style={[
              styles.circle,
              {backgroundColor: theme.background.layout.default},
            ]}>
            <Icon color={theme.text.neutral.default} size={iconSizes.x6} />
          </View>
        )}
        {value ? (
          <View style={styles.textContainer}>
            <Typography variant="s" weight="semiBold" numberOfLines={2}>
              {label}
            </Typography>
            <Typography
              variant="xs"
              color={theme.text.neutral.lighter}
              numberOfLines={1}>
              {value}
            </Typography>
          </View>
        ) : (
          <Typography variant="s" weight="semiBold" numberOfLines={2}>
            {label}
          </Typography>
        )}
      </View>
      <IconChevronRight
        color={theme.text.neutral.default}
        size={iconSizes.x6}
      />
    </Pressable>
  );
}
export default ConfigurationItem;