import { TableLoaderProps as HuTableLoaderProps } from '@material-hu/components/design-system/Table/components/TableLoader/types';

import { JourneyTask } from 'src/pages/dashboard/employeeLifecycle/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { ItemsList } from '../../../components';
import { useFormatStepTasks } from '../../../hooks/useFormatStepTasks';

type CompletedTasksTabProps = {
  tasks: JourneyTask[];
  isLoading: boolean;
  isUserTasksModule: boolean;
  pagination: HuTableLoaderProps;
};

export const CompletedTasksTab = ({
  tasks,
  isLoading,
  isUserTasksModule,
  pagination,
}: CompletedTasksTabProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');

  // Format tasks
  const { completedTasks } = useFormatStepTasks({ tasks, isUserTasksModule });

  return (
    <ItemsList
      title={t('tasks.completed')}
      items={completedTasks}
      isLoading={isLoading}
      pagination={pagination}
      emptyTexts={{
        title: t('empty_tasks_list.completed_title'),
        description: t('empty_tasks_list.completed_description'),
      }}
    />
  );
};