import { html } from "lit";
import "../atomic-icon/atomic-icon.js";
import { renderHeading } from "../heading.js";
import { renderSwitch } from "../switch.js";
const renderCardHeader = ({ props })=>{
    const { i18n, isAnswerVisible, toggleTooltip, withToggle, onToggle } = props;
    return html` <div
    part="header"
    class="flex items-center ${isAnswerVisible ? 'border-b-1 border-gray-200' : ''} px-6 py-3"
  >
    <atomic-icon
      part="header-icon"
      class="text-primary h-4 w-4 fill-current"
      .icon=${'assets://sparkles.svg'}
    >
    </atomic-icon>
    ${renderHeading({
        props: {
            level: 0,
            part: 'header-label',
            class: 'text-primary inline-block rounded-md px-2.5 py-2 font-medium'
        }
    })(html`${i18n.t('generated-answer-title')}`)}
    <div class="ml-auto flex h-9 items-center">
      ${renderSwitch({
        props: {
            part: 'toggle',
            checked: isAnswerVisible,
            onToggle,
            ariaLabel: i18n.t('generated-answer-title'),
            title: toggleTooltip,
            withToggle,
            tabIndex: 0
        }
    })}
    </div>
  </div>`;
};
export { renderCardHeader };
