import { type FC } from 'react';

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

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

import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export const SharedPostPlaceholder: FC = () => {
  const { t } = useTranslation('post');

  return (
    <Box sx={{ px: 2 }}>
      <Stack
        sx={{
          alignItems: 'center',
          gap: 1.5,
          py: 3,
          px: 2,
          borderRadius: theme => theme.shape.borderRadiusL,
          border: theme =>
            `1px solid ${theme.palette.new.border.neutral.default}`,
        }}
      >
        <Avatar
          Icon={IconInfoCircle}
          size="large"
          sx={{
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
          }}
        />
        <Typography
          variant="globalS"
          color={theme => theme.palette.new.text.neutral.lighter}
          textAlign="center"
        >
          {t('post:shared_post_unavailable_description')}
        </Typography>
      </Stack>
    </Box>
  );
};

export default SharedPostPlaceholder;