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';

interface Props {
  isInitial?: boolean;
}

export function SearchEmptyState({isInitial = false}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const titleKey = isInitial
    ? 'global_search.empty_state.title'
    : 'global_search.no_results_state.title';
  const descriptionKey = isInitial
    ? 'global_search.empty_state.description'
    : 'global_search.no_results_state.description';

  return (
    <ListEmpty
      title={t(titleKey)}
      description={t(descriptionKey)}
      IconComponent={<Avatar Icon={IconInfoCircle} variant="primary" />}
      style={[
        styles.emptyListContainer,
        {
          backgroundColor: theme.background.elements.default,
          borderColor: theme.border.neutral.default,
        },
      ]}
    />
  );
}