import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

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

export type NoResultsProps = {
  label?: string | React.ReactNode;
};

const NoResults: FC<NoResultsProps> = props => {
  const { label } = props;

  const { t } = useLokaliseTranslation('web_only');

  const fallback = t('list.no_results');
  const isSimpleText = typeof label === 'string' || typeof label === 'number';

  if (!isSimpleText && label != null) {
    return (
      <Box
        sx={{
          textAlign: 'center',
        }}
      >
        {label}
      </Box>
    );
  }

  const displayText = label == null || label === '' ? fallback : label;

  return (
    <Typography
      color="textSecondary"
      variant="subtitle2"
      sx={{
        textAlign: 'center',
        mt: label == null || label === '' ? 2 : 0,
      }}
    >
      {displayText}
    </Typography>
  );
};

export default NoResults;