import type { Attributes } from "frontend/elementcreate";
import * as elements from "frontend/elementcreate";

function MediaElement(attributes: Attributes, contents: string[]) {
  const ret = <div class="col media-element" id={attributes['id']}>
    <div class='card shadow-sm'>
      <img class='card-img-top' src={attributes['webImg']} width='100%' onerror={attributes['imageError']}></img>
      <div class='card-body'>
        <h5 class='card-title'>{attributes['title']}</h5>
        <p class='card-text'>{attributes['released']}</p>
        <div class="d-none justify-content-between align-items-center">
          <div class="btn-group">
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick={attributes['fun']}>delete</button>
          </div>
        </div>
      </div>
    </div>
  </div>;
  return ret;
}


function MyHeader(attributes: Attributes, contents: string[]) {
  return <div class="row">
    <div class='col'>
      <h2 class='text-center'>{attributes['title']} {attributes['num'] ? ": " + attributes['num'] : ""}</h2>
    </div>
  </div>;
}

function MediaContainer(attributes: Attributes, contents: string[]) {
  return <div id={attributes['id']} class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3">{contents[0]}</div>;
}

export { MediaElement, MyHeader, MediaContainer }