'use client';
import React, { useEffect, useState } from 'react';
import FileGraphic from '../../graphics/File/index.js';
import useThumbnail from '../../hooks/useThumbnail.js';
const baseClass = 'thumbnail';
const Thumbnail = (props)=>{
    const { className = '', collectionSlug, doc: { filename } = {}, doc, fileSrc, imageCacheTag, size, uploadConfig } = props;
    const thumbnailSRC = useThumbnail(collectionSlug, uploadConfig, doc) || fileSrc;
    const [src, setSrc] = useState(thumbnailSRC);
    const classes = [
        baseClass,
        `${baseClass}--size-${size || 'medium'}`,
        className
    ].join(' ');
    useEffect(()=>{
        if (thumbnailSRC) {
            setSrc(`${thumbnailSRC}${imageCacheTag ? `?${imageCacheTag}` : ''}`);
        }
    }, [
        thumbnailSRC,
        imageCacheTag
    ]);
    return /*#__PURE__*/ React.createElement("div", {
        className: classes
    }, src && /*#__PURE__*/ React.createElement("img", {
        alt: filename,
        src: src
    }), !src && /*#__PURE__*/ React.createElement(FileGraphic, null));
};
export default Thumbnail;

//# sourceMappingURL=index.js.map