import React from 'react';
import { Layer, Tile } from '@carbon/react';
import { useTranslation } from 'react-i18next';
import type { EmptyStateProps } from '../../filter/filter-types';
import FilterEmptyDataIllustration from './filter-empty-data-illustration';
import styles from './filter-empty-state.scss';

const FilterEmptyState: React.FC<EmptyStateProps> = (props) => {
  const { t } = useTranslation();

  return (
    <Layer>
      <Tile className={styles.tile}>
        <FilterEmptyDataIllustration />
        <p className={styles.content}>{t('noResultsToDisplay', 'No results to display')}</p>
        {props.clearFilter && (
          <p className={styles.action}>
            <span className={styles.link} role="button" tabIndex={0} onClick={() => props.clearFilter()}>
              {t('clearFilters', 'Clear filters')}
            </span>{' '}
            <span>{t('resetView', 'to reset this view')}</span>
          </p>
        )}
      </Tile>
    </Layer>
  );
};

export default FilterEmptyState;