import React, { forwardRef } from 'react';
import ButtonCore from '../Button/ButtonCore';
import Proportion from '../Proportion';
import { dataHooks } from './FillPreview.constants';
import { st, classes } from './FillPreview.st.css.js';
import { useStyledContent } from './hooks/useStyledContent';
export const FillPreview = forwardRef(({ selected = false, className, aspectRatio, dataHook, disabled, fill, size, contentClassName, ...rest }, ref) => {
    const { children, contentClassName: updatedContentClassName, style, } = useStyledContent({
        contentClassName,
        disabled,
        fill,
    });
    return (React.createElement("div", { ref: ref, className: st(classes.root, { size }, className) },
        React.createElement(Proportion, { dataHook: dataHook, aspectRatio: aspectRatio },
            React.createElement(ButtonCore, { ...rest, "data-selected": selected, className: st(classes.button, {
                    selected,
                    empty: !fill && !disabled,
                }), "data-hook": dataHooks.button, disabled: disabled, style: style, contentClassName: updatedContentClassName, children: children }))));
});
FillPreview.displayName = 'FillPreview';
export default FillPreview;
//# sourceMappingURL=FillPreview.js.map