import { OwnUserResponse } from '@stream-io/video-react-sdk';
import Stack from '@material-hu/mui/Stack';

import useTheme from '@material-hu/mui/styles/useTheme';

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

import { getInitials } from 'src/utils/userUtils';

type VideoPreviewPlaceholderProps = {
  connectedUser: OwnUserResponse;
};

const VideoPreviewPlaceholder = (props: VideoPreviewPlaceholderProps) => {
  const { connectedUser } = props;
  const theme = useTheme();

  return (
    <Stack
      sx={{
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        background: theme.palette.new.text.neutral.default,
      }}
    >
      <Avatar
        src={connectedUser.image}
        text={getInitials(connectedUser.name || '')}
        size="large"
      />
    </Stack>
  );
};

export default VideoPreviewPlaceholder;