import Stack, { StackProps } from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

type Props = {
  title: string;
  subtitle: React.ReactNode;
  sx?: StackProps['sx'];
};

const NoTasks = ({ title, subtitle, sx }: Props) => (
  <Stack
    spacing={1}
    sx={sx}
  >
    <Typography
      sx={{ textAlign: 'center', fontWeight: 'bold', fontSize: '1.2em' }}
      color="secondary"
    >
      {title}
    </Typography>
    <Typography
      sx={{ textAlign: 'center' }}
      color="secondary"
    >
      {subtitle}
    </Typography>
  </Stack>
);

export default NoTasks;