"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Thumbnail = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const Theme_1 = require("../Theme");
const Icon_1 = require("../Icon");
const Thumbnail_css_1 = __importDefault(require("./Thumbnail.css"));
function Thumbnail({ badge, description, source, sources, size = 'base', }) {
    const { thumbnail: { aspectRatio, border = 'full', badgeBackground = 'subdued' }, } = Theme_1.useThemeConfiguration();
    return (<div className={css_utilities_1.classNames(Thumbnail_css_1.default.Thumbnail, Thumbnail_css_1.default[css_utilities_1.variationName('size', size)], border && Thumbnail_css_1.default[css_utilities_1.variationName('border', border)], aspectRatio && aspectRatio < 1 && Thumbnail_css_1.default.aspectRatioLandscape, aspectRatio && aspectRatio > 1 && Thumbnail_css_1.default.aspectRatioPortrait)}>
      {badge != null && (<span className={css_utilities_1.classNames(Thumbnail_css_1.default.Badge, Thumbnail_css_1.default[css_utilities_1.variationName('Badge-background', badgeBackground)])} aria-hidden>
          {badge}
        </span>)}
      {source ? (<img className={Thumbnail_css_1.default.Image} srcSet={toSrcSet(sources)} src={source} alt={description}/>) : (<span className={css_utilities_1.classNames(Thumbnail_css_1.default.Placeholder)}>
          <span className={Thumbnail_css_1.default.Icon}>
            <Icon_1.Icon source="camera"/>
          </span>
        </span>)}
    </div>);
}
exports.Thumbnail = Thumbnail;
function toSrcSet(sources) {
    if (!sources) {
        return '';
    }
    return sources
        .map(({ source, resolution }) => {
        if (resolution) {
            return `${source} ${resolution}x`;
        }
        return source;
    })
        .join(', ');
}