import React from 'react';
import { st, classes } from './StarsRatingBar.st.css.js';
import { dataHooks, starValues } from '../constants';
import { StarFilled } from '@wix/wix-ui-icons-common';
import semanticClassNames from '../StarsRatingBar.semanticClassNames';
import { getRatingLabel, getStarSizePx } from '../utils/common';
export const ReadOnlyStarsRatingBar = (props) => {
    const { dataHook, className, value = 0 } = props;
    const sizePx = getStarSizePx(props);
    return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, { readOnly: true }, className) },
        React.createElement("div", { role: "img", "aria-label": getRatingLabel(props, value), className: classes.starsContainer }, starValues.map(starValue => {
            const filled = value >= starValue;
            return (React.createElement("div", { key: starValue, "data-hook": filled ? dataHooks.filledStar : dataHooks.emptyStar, "data-index": starValue, className: st(classes.starContainer, semanticClassNames.button) },
                React.createElement(StarFilled, { "aria-hidden": true, className: st(classes.star, { filled }, filled
                        ? semanticClassNames.filledIcon
                        : semanticClassNames.emptyIcon), size: sizePx })));
        }))));
};
//# sourceMappingURL=ReadOnlyStarsRatingBar.js.map