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

import {styles} from './styles';

interface FieldItemProps {
  Icon: Icon;
  label: string;
  value: string;
  numberOfLines?: number;
}

// eslint-disable-next-line @typescript-eslint/no-shadow
function FieldItem({Icon, label, value, numberOfLines = 1}: FieldItemProps) {
  const {theme, iconSizes} = useTheme();

  return (
    <View style={styles.container}>
      <Icon
        style={styles.icon}
        size={iconSizes.x4}
        color={theme.text.neutral.default}
      />
      <Typography style={styles.flex}>
        <Typography weight="semiBold">{`${label}: `}</Typography>
        <Typography numberOfLines={numberOfLines}>{value}</Typography>
      </Typography>
    </View>
  );
}

export default FieldItem;