import React from 'react';
import { Image } from '@seliseblocks/next-images';

import Box from '@mui/material/Box';

import { ISingleFilePreviewProps } from '../types';

/**
 * @description SingleFilePreview - component
 * @param {ISingleFilePreviewProps} imgUrl - The props of the single file preview
 * @return {React.ReactNode} component - The single file preview
 */
export const SingleFilePreview = ({ imgUrl = '' }: ISingleFilePreviewProps) => (
  <Box
    sx={{
      p: 1,
      top: 0,
      left: 0,
      width: 1,
      height: 1,
      position: 'absolute',
    }}
  >
    <Image
      alt="file preview"
      src={imgUrl}
      sx={{
        width: 1,
        height: 1,
        borderRadius: 1,
      }}
    />
  </Box>
);