import React from 'react';
import {useTranslation} from 'react-i18next';
import {IconInfoCircle} from '@tabler/icons-react-native';
import {Avatar, ListEmpty} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

function EmptyState() {
  const {t} = useTranslation();
  const {theme} = useTheme();
  return (
    <ListEmpty
      title={t('group.manage_post_approvals.empty.title')}
      description={t('group.manage_post_approvals.empty.description')}
      IconComponent={
        <Avatar Icon={IconInfoCircle} variant="primary" size="lg" />
      }
      style={[
        styles.emptyListContainer,
        {
          backgroundColor: theme.background.elements.default,
          borderColor: theme.border.neutral.default,
        },
      ]}
    />
  );
}

export default EmptyState;
