import { FC } from 'react';

import { IconZoomExclamation, 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';

type ListEmptyStateProps = {
  title: string;
  description: string;
  Icon?: TablerIcon;
};

const ListEmptyState: FC<ListEmptyStateProps> = props => {
  const { title, description, Icon } = props;

  return (
    <Stack
      sx={{
        alignItems: 'center',
        gap: theme => theme.spacing(2),
        flex: 1,
        justifyContent: 'center',
      }}
    >
      <HuAvatar
        size="large"
        Icon={Icon || IconZoomExclamation}
        color="primary"
      />
      <Stack sx={{ textAlign: 'center' }}>
        <Typography
          variant="globalM"
          fontWeight="fontWeightSemiBold"
        >
          {title}
        </Typography>
        <Typography variant="globalXS">{description}</Typography>
      </Stack>
    </Stack>
  );
};

export default ListEmptyState;
