import "../atomic-icon/atomic-icon.js";
import { html } from "lit";
import clear_slim from "../../../images/clear-slim.js";
import { renderButton } from "../button.js";
const renderTextAreaClearButton = ({ props: { textAreaRef, i18n, onClick } })=>html`<div
    part="clear-button-wrapper"
    class="ml-2 flex items-center justify-center py-2"
    @pointerdown=${(e)=>e.preventDefault()}
  >
    ${renderButton({
        props: {
            style: 'text-transparent',
            part: 'clear-button',
            class: 'text-neutral-dark flex h-8 w-8 shrink-0 items-center justify-center',
            onClick: ()=>{
                onClick?.();
                textAreaRef?.value?.focus();
            },
            ariaLabel: i18n.t('clear-searchbox')
        }
    })(html`<atomic-icon
        part="clear-icon"
        icon=${clear_slim}
        class="h-4 w-4"
      ></atomic-icon>`)}
  </div>`;
export { renderTextAreaClearButton };
