import { IconInfoCircle } 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: 2,
        ...props.sx,
      }}
    >
      <HuAvatar
        size="large"
        Icon={IconInfoCircle}
        color="primary"
      />
      <HuTitle
        description={description}
        title={title}
        variant="M"
        centered
      />
    </Stack>
  );
};

export default EmptyState;
