import React from 'react';
import { useTranslation } from '../../providers/Translation/index.js';
import { formatDocTitle } from '../../utilities/formatDocTitle.js';
import Thumbnail from '../Thumbnail/index.js';
const baseClass = 'thumbnail-card';
export const ThumbnailCard = (props)=>{
    const { alignLabel, className, collection, doc, label: labelFromProps, onClick, thumbnail } = props;
    const { i18n, t } = useTranslation();
    const classes = [
        baseClass,
        className,
        typeof onClick === 'function' && `${baseClass}--has-on-click`,
        alignLabel && `${baseClass}--align-label-${alignLabel}`
    ].filter(Boolean).join(' ');
    let title = labelFromProps;
    if (!title) {
        title = formatDocTitle({
            doc,
            i18n,
            useAsTitle: collection?.admin?.useAsTitle
        }) || doc?.filename || `[${t('general:untitled')}]`;
    }
    return /*#__PURE__*/ React.createElement("button", {
        className: classes,
        onClick: onClick,
        title: title,
        type: "button"
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__thumbnail`
    }, thumbnail && thumbnail, !thumbnail && collection && doc && /*#__PURE__*/ React.createElement(Thumbnail, {
        doc: doc,
        size: "expand"
    })), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__label`
    }, title));
};

//# sourceMappingURL=index.js.map