import "../atomic-icon/atomic-icon.js";
import { html } from "lit";
import { when } from "lit/directives/when.js";
import { renderButton } from "../button.js";
import arrow_bottom_rounded from "../../../images/arrow-bottom-rounded.js";
import arrow_top_rounded from "../../../images/arrow-top-rounded.js";
const renderShowButton = ({ props })=>html`${renderButton({
        props: {
            style: 'text-primary',
            part: 'answer-show-button',
            class: 'hidden items-center hover:bg-transparent',
            onClick: props.onClick
        }
    })(html`
    <div class="text-base font-light">
      ${when(props.isCollapsed, ()=>props.i18n.t('show-more'), ()=>props.i18n.t('show-less'))}
    </div>
    <atomic-icon
      part="answer-show-icon"
      class="ml-2 w-3.5"
      icon=${props.isCollapsed ? arrow_bottom_rounded : arrow_top_rounded}
    ></atomic-icon>
  `)}`;
export { renderShowButton };
