import { html } from "lit";
import { renderHeading } from "../../heading.js";
import { multiClassMap, tw } from "../../../../directives/multi-class-map.js";
const renderSuggestionsWrapper = ({ props })=>(children)=>{
        const containerClasses = tw({
            'bg-background border-neutral text-on-background overflow-hidden rounded-lg border': true
        });
        const questionsClasses = tw({
            'divide-neutral divide-y': true
        });
        return html`<aside
      part="container"
      class=${multiClassMap(containerClasses)}
      aria-label=${props.i18n.t('smart-snippet-people-also-ask')}
    >
      ${renderHeading({
            props: {
                level: props.headingLevel,
                class: 'border-neutral border-b px-6 py-4 text-xl leading-8',
                part: 'heading'
            }
        })(html`${props.i18n.t('smart-snippet-people-also-ask')}`)}
      <ul part="questions" class=${multiClassMap(questionsClasses)}>
        ${children}
      </ul>
    </aside>`;
    };
export { renderSuggestionsWrapper };
