import { html } from "lit";
import { keyed } from "lit/directives/keyed.js";
import { map } from "lit/directives/map.js";
import "./atomic-result-placeholder.js";
import "../../search/atomic-result-table-placeholder/atomic-result-table-placeholder.js";
const renderItemPlaceholders = ({ props })=>{
    const { display } = props;
    if ('table' === display) return renderTableItemPlaceholders({
        props
    });
    return renderGridOrListItemPlaceholders({
        props
    });
};
const renderGridOrListItemPlaceholders = ({ props })=>{
    const placeholders = Array.from({
        length: props.numberOfPlaceholders
    });
    return html`${map(placeholders, (i)=>html`${keyed(`placeholder-${i}`, html`<atomic-result-placeholder
          .density=${props.density}
          .display=${props.display}
          .imageSize=${props.imageSize}
        ></atomic-result-placeholder>`)}`)}`;
};
const renderTableItemPlaceholders = ({ props })=>html`<atomic-result-table-placeholder
    .density=${props.density}
    .imageSize=${props.imageSize}
    .rows=${props.numberOfPlaceholders}
  ></atomic-result-table-placeholder>`;
export { renderItemPlaceholders };
