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 CardContainer from '@material-hu/components/design-system/CardContainer';

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

type Props = {
  source: string;
  fileName: string;
};

const FocusFileVisualizerContentNotAvailable = ({
  source,
  fileName,
}: Props) => {
  const { t } = useLokaliseTranslation('files');

  return (
    <Stack
      sx={{
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        p: 2,
      }}
    >
      <CardContainer hasShadow>
        <Stack sx={{ gap: 2 }}>
          <Typography>{t('not_supported_message')}</Typography>

          <Button
            variant="primary"
            onClick={() => downloadFile(source, fileName)}
          >
            {t('general:download')}
          </Button>
        </Stack>
      </CardContainer>
    </Stack>
  );
};

export default FocusFileVisualizerContentNotAvailable;