import { IconInfoSquareRounded } from '@material-hu/icons/tabler';
import Stack, { StackProps } from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuTitle from '@material-hu/components/design-system/Title';

type EmptyStateProps = StackProps & {
  title: string;
  description: string;
};

const EmptyState = ({ title, description, ...props }: EmptyStateProps) => {
  return (
    <Stack
      {...props}
      sx={{
        alignItems: 'center',
        gap: 2,
        p: theme => theme.spacing(2),
        ...props.sx,
      }}
    >
      <HuAvatar
        size="large"
        Icon={IconInfoSquareRounded}
      />
      <HuTitle
        description={description}
        title={title}
        variant="S"
        centered
      />
    </Stack>
  );
};

export default EmptyState;