import { IconArrowUp } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import { useLokaliseTranslation } from 'src/utils/i18n';

type NoMoreResultsFooterProps = {
  scrollableElementId?: string;
};

export const NoMoreResultsFooter = ({
  scrollableElementId = 'dashboard-layout-content',
}: NoMoreResultsFooterProps) => {
  const { t } = useLokaliseTranslation(['general']);

  const handleScrollToTop = () => {
    const element = document.getElementById(scrollableElementId);

    element?.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <HuCardContainer fullWidth>
      <Stack
        direction="row"
        sx={{
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 1,
        }}
      >
        <Stack />
        <Typography variant="globalM">
          {t('general:no_more_results')}
        </Typography>
        <Button
          variant="secondary"
          sx={{
            justifySelf: 'flex-end',
            width: '40px',
            height: '40px',
            p: 0,
            minWidth: 'unset',
          }}
          onClick={handleScrollToTop}
        >
          <IconArrowUp />
        </Button>
      </Stack>
    </HuCardContainer>
  );
};