import { html } from "lit";
import { multiClassMap, tw } from "../../../directives/multi-class-map.js";
import thumbs from "../../../images/thumbs.js";
import { getClassNameForButtonStyle, getRippleColorForButtonStyle } from "../button-style.js";
import "../atomic-icon/atomic-icon.js";
import { createRipple } from "../../../utils/ripple-utils.js";
const renderFeedbackButton = ({ props })=>{
    const buttonStyle = 'text-transparent';
    const rippleColor = getRippleColorForButtonStyle(buttonStyle);
    const baseClassName = getClassNameForButtonStyle(buttonStyle);
    const classNames = multiClassMap(tw({
        [baseClassName]: true,
        'feedback-button rounded-md p-2': true,
        'text-neutral-dark': !props.active,
        [props.variant]: true,
        active: props.active,
        'hover:text-success': 'like' === props.variant,
        'hover:text-error': 'dislike' === props.variant,
        'text-success': props.active && 'like' === props.variant,
        'text-error': props.active && 'dislike' === props.variant
    }));
    const iconClassNames = multiClassMap(tw({
        'w-5': true,
        'rotate-180': 'dislike' === props.variant
    }));
    return html`<button
    type="button"
    title=${props.title}
    part="feedback-button"
    class=${classNames}
    aria-pressed=${props.active ? 'true' : 'false'}
    @mousedown=${(e)=>createRipple(e, {
            color: rippleColor
        })}
    @click=${props.onClick}
  >
    <atomic-icon class=${iconClassNames} .icon=${thumbs}></atomic-icon>
  </button>`;
};
export { renderFeedbackButton };
