import React from 'react';
import clasnames from 'classnames';

import DefaultProviewImg from '@/assets/img/default_preview.png';
import EmptyFileImg from '@/assets/img/empty_file.png';

type DefaultPreviewImgModeType = 'default' | 'emptyFile';

const DefaultPreviewImgs: Record<DefaultPreviewImgModeType, string> = {
  default: DefaultProviewImg,
  emptyFile: EmptyFileImg,
};

export interface PreviewImageProp {
  src?: string;
  className?: string;
  defaultPreviewImgMode?: DefaultPreviewImgModeType;
  onClick?: () => void;
}

const PreviewImage: React.FC<PreviewImageProp> = function ({
  src,
  className,
  defaultPreviewImgMode = 'default',
  onClick,
}) {
  return (
    <div
      className={clasnames('w-full h-full cursor-pointer group bg-bgColorLayout m-0', className)}
      onClick={onClick}>
      <div className={clasnames('w-full h-full')}>
        <div
          className="w-full h-full"
          style={{
            backgroundImage: `url("${src || DefaultPreviewImgs[defaultPreviewImgMode]}")`,
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
          }}
        />
      </div>
    </div>
  );
};

export default PreviewImage;