import { FC } from 'react';

import { TablerIcon } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';

type EmptyStateProps = {
  title: string;
  description: string;
  Icon: TablerIcon;
};

const EmptyState: FC<EmptyStateProps> = ({ title, description, Icon }) => {
  return (
    <HuCardContainer
      sx={{
        p: 1,
      }}
      fullWidth
    >
      <Stack
        sx={{
          py: 4,
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <HuAvatar
          Icon={Icon}
          color="primary"
          size="large"
          sx={{ mb: 1 }}
        />
        <Stack sx={{ textAlign: 'center', maxWidth: '550px' }}>
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
            color={theme => theme.palette.new.text.neutral.default}
          >
            {title}
          </Typography>
          <Typography
            variant="globalS"
            color={theme => theme.palette.new.text.neutral.lighter}
          >
            {description}
          </Typography>
        </Stack>
      </Stack>
    </HuCardContainer>
  );
};

export default EmptyState;