import { type FC } from 'react';

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

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

const NoReviews: FC = () => {
  const { t } = useLokaliseTranslation('performance');

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        backgroundColor: 'background.paper',
        border: theme => `1px solid ${theme.palette.divider}`,
        borderRadius: '16px',
        height: '140px',
        py: '48px',
      }}
    >
      <Typography variant="h6">{t('cycles.no_cycles_title')}</Typography>
      <Typography
        variant="body1"
        color="text.secondary"
      >
        {t('cycles.no_cycles_description')}
      </Typography>
    </Box>
  );
};

export default NoReviews;
