import React from 'react';
import {View, StyleProp, ViewStyle} from 'react-native';
import Icon, {IconName} from '@components/Icon';
import Text from '@components/Text';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface Props {
  customStyle?: StyleProp<ViewStyle>;
  icon: IconName;
  message?: string;
}

/**
 * @deprecated - Use `_HuGo/List/ListEmpty` instead
 */
function EmptyListPlaceholder({customStyle, icon, message}: Props) {
  return (
    <View style={[styles.container, customStyle]}>
      <Icon name={icon} size="xl" color={COLORS.DARKEST_GRAY} />
      {!!message && (
        <Text align="center" color={COLORS.DARKEST_GRAY} variant="h6">
          {message}
        </Text>
      )}
    </View>
  );
}

export default EmptyListPlaceholder;