import Card from '@material-hu/mui/Card';
import CardMedia from '@material-hu/mui/CardMedia';
import Stack from '@material-hu/mui/Stack';

type FocusFileVisualizerContentImageProps = {
  source: string;
};

const FocusFileVisualizerContentImage = ({
  source,
}: FocusFileVisualizerContentImageProps) => {
  return (
    <Stack
      sx={{
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        p: 2,
      }}
    >
      <Card
        sx={{
          backgroundColor: theme =>
            theme.palette.new.background.layout.tertiary,
          padding: 2,
          borderRadius: 2,
        }}
      >
        <CardMedia
          component="img"
          src={source || ''}
          sx={{
            height: 'fit-content',
            width: 'fit-content',
            maxWidth: '100%',
            maxHeight: '100%',
            objectFit: 'contain',
            borderRadius: 1,
          }}
        />
      </Card>
    </Stack>
  );
};

export default FocusFileVisualizerContentImage;