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

import { ItemsList } from '../../../components';
import { useFormatJourneys } from '../../../hooks/useFormatJourneys';
import { useGetJourneys } from '../../../hooks/useGetJourneys';
import JourneyFilters from '../JourneyFilters';

const MyOnboardingTab = () => {
  const { t } = useLokaliseTranslation(['employee_lifecycle', 'screens']);

  // Get journeys
  const { journeys, isLoading } = useGetJourneys();

  // Format journeys
  const { formattedJourneys } = useFormatJourneys(journeys);

  return (
    <>
      <JourneyFilters loading={isLoading} />
      <ItemsList
        title={t('journeys.title')}
        items={formattedJourneys}
        isLoading={isLoading}
        emptyTexts={{
          title: t('journeys.empty_title'),
          description: t('journeys.empty_description'),
        }}
      />
    </>
  );
};

export default MyOnboardingTab;
