'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var PhotoEditor_module = require('./PhotoEditor.module.css.js');

const FilterThumb = React.memo(({ filter, selected, accent, onSelect, generateThumbnail }) => {
    const [thumb, setThumb] = React.useState("");
    const canvasRef = React.useRef(null);
    const mounted = React.useRef(true);
    React.useEffect(() => {
        mounted.current = true;
        const canvas = document.createElement("canvas");
        canvasRef.current = canvas;
        generateThumbnail(canvas, filter);
        if (mounted.current && canvas.width > 0) {
            setThumb(canvas.toDataURL("image/png"));
        }
        return () => { mounted.current = false; };
    }, [filter, generateThumbnail]);
    return (jsxRuntime.jsxs("button", { onClick: onSelect, className: selected ? PhotoEditor_module.filterThumbSelected : PhotoEditor_module.filterThumb, style: {
            borderColor: selected ? accent : undefined,
            boxShadow: selected ? `0 0 0 2px ${accent}` : undefined,
        }, title: filter.name, children: [thumb ? (jsxRuntime.jsx("img", { src: thumb, alt: filter.name, className: PhotoEditor_module.filterThumbImg })) : (jsxRuntime.jsx("div", { className: PhotoEditor_module.filterThumbPlaceholder })), jsxRuntime.jsx("span", { className: PhotoEditor_module.filterThumbLabel, children: filter.name })] }));
});
FilterThumb.displayName = "FilterThumb";

module.exports = FilterThumb;
//# sourceMappingURL=FilterThumb.js.map
