import { jsxs, jsx } from 'react/jsx-runtime';
import React, { useState, useRef, useEffect } from 'react';
import cs from './PhotoEditor.module.css.js';

const FilterThumb = React.memo(({ filter, selected, accent, onSelect, generateThumbnail }) => {
    const [thumb, setThumb] = useState("");
    const canvasRef = useRef(null);
    const mounted = useRef(true);
    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 (jsxs("button", { onClick: onSelect, className: selected ? cs.filterThumbSelected : cs.filterThumb, style: {
            borderColor: selected ? accent : undefined,
            boxShadow: selected ? `0 0 0 2px ${accent}` : undefined,
        }, title: filter.name, children: [thumb ? (jsx("img", { src: thumb, alt: filter.name, className: cs.filterThumbImg })) : (jsx("div", { className: cs.filterThumbPlaceholder })), jsx("span", { className: cs.filterThumbLabel, children: filter.name })] }));
});
FilterThumb.displayName = "FilterThumb";

export { FilterThumb as default };
//# sourceMappingURL=FilterThumb.js.map
