import { useMemo } from 'react';

import { Stack, useTheme } from '@mui/material';

import { type CoverPictureImageProps } from '../types';

const CoverPictureImage = ({
  image,
  aspectRatio = '2/1',
}: CoverPictureImageProps) => {
  const { shape, palette } = useTheme();

  const src = useMemo(() => {
    if (!image) return '';
    return image instanceof File ? URL.createObjectURL(image) : image;
  }, [image]);

  return (
    <Stack
      className="HuCoverPictureUploader-image"
      sx={{
        p: 2,
        borderRadius: shape.borderRadiusL,
        backgroundColor: palette.new.background.elements.default,
      }}
    >
      <Stack
        component="img"
        alt=""
        src={src}
        sx={{
          borderRadius: shape.borderRadiusL,
          aspectRatio,
        }}
      />
    </Stack>
  );
};

export default CoverPictureImage;
