import { useNavigate } from 'react-router-dom';

import { IconInfoCircle, IconSearch } from '@material-hu/icons/tabler';

import StateCard from '@material-hu/components/design-system/StateCard';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { recruitingRoutes } from '../../routes';

type JobsTableEmptyStateProps = {
  hasSearch?: boolean;
  hasFilters?: boolean;
};

export const JobsTableEmptyState = ({
  hasSearch = false,
  hasFilters = false,
}: JobsTableEmptyStateProps) => {
  const { t } = useLokaliseTranslation(['ats', 'general']);
  const navigate = useNavigate();

  if (hasSearch || hasFilters) {
    return (
      <StateCard
        title={t('general:no_results_found.title')}
        description={t(
          hasSearch
            ? 'general:no_results_for_search'
            : 'general:no_results_for_filters',
        )}
        icon={IconSearch}
        variant="primary"
      />
    );
  }

  return (
    <StateCard
      title={t('job_offers.list.empty_state.title')}
      description={t('job_offers.list.empty_state.description')}
      icon={IconInfoCircle}
      variant="primary"
      primaryAction={{
        label: t('job_offers.list.empty_state.cta'),
        onClick: () => {
          navigate(recruitingRoutes.newOffer());
        },
      }}
    />
  );
};