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

import InputClassic from '@material-hu/components/design-system/Inputs/Classic';

import { useManageAttendanceParams } from 'src/pages/dashboard/Learning/Sessions/hooks/useManageAttendanceParams';
import { useLokaliseTranslation } from 'src/utils/i18n';

export const TableSearch = () => {
  const { search, setSearch } = useManageAttendanceParams();
  const { t } = useLokaliseTranslation('learning');

  return (
    <InputClassic
      id="attendance-table-search"
      aria-label={t('general:search_collaborators')}
      placeholder={t('general:search_collaborators')}
      value={search}
      autoFocus
      hasCounter={false}
      onChange={value => setSearch(value)}
      startAdornment={<IconSearch />}
    />
  );
};