import { html } from "lit";
import { when } from "lit/directives/when.js";
import { renderCheckbox } from "../../../common/checkbox.js";
const highlightKeywordsCheckboxId = 'atomic-quickview-sidebar-highlight-keywords';
const renderHighlightKeywordsCheckbox = ({ props })=>{
    const label = props.i18n.t('keywords-highlight');
    return html`
    ${renderCheckbox({
        props: {
            text: label,
            class: 'mr-2',
            id: highlightKeywordsCheckboxId,
            checked: !props.highlightKeywords.highlightNone,
            onToggle: (checked)=>props.onHighlightKeywords({
                    ...props.highlightKeywords,
                    highlightNone: !checked
                })
        }
    })}
    ${when(!props.minimized, ()=>html`
        <label
          class="cursor-pointer font-bold whitespace-nowrap"
          for=${highlightKeywordsCheckboxId}
          >${label}</label
        >
      `)}
  `;
};
export { renderHighlightKeywordsCheckbox };
