import Paper from '@material-hu/mui/Paper';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import PlusIcon from 'src/icons/Plus';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type ContentEmptyProps = {
  disabled?: boolean;
  onCreateModule?: () => void;
};

export const ContentEmpty = ({
  disabled = false,
  onCreateModule = () => null,
}: ContentEmptyProps) => {
  const { t } = useLokaliseTranslation('learning');
  const theme = useTheme();

  const handleCreateModule = () => onCreateModule();

  return (
    <Stack
      component={Paper}
      elevation={24}
      sx={{
        borderRadius: '20px',
        p: 3,
        m: 3,
        gap: 5,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: 'fit-content',
      }}
    >
      <Stack sx={{ gap: 2, width: '100%', alignItems: 'center' }}>
        <Typography variant="h6">
          {t('course.lesson.no_modules_created')}
        </Typography>
        <Typography
          variant="body1"
          sx={{ color: theme.palette.text.disabled }}
        >
          {t('course.lesson.no_modules_created_description')}
        </Typography>
      </Stack>
      <Button
        startIcon={<PlusIcon />}
        variant="outlined"
        onClick={handleCreateModule}
        disabled={disabled}
      >
        {t('course.create_module')}
      </Button>
    </Stack>
  );
};

export default ContentEmpty;