---
import { md } from "@utils/helpers/general.js";
import { IconCircleX, IconInfoCircle } from "@tabler/icons-react";

const { content, id } = Astro.props;
---
<>
  <input
    class="modal-input"
    id={id}
    type="checkbox"
    tabindex="0"
  />
  <label class="modal-toggle" for={id}>
    <IconInfoCircle size={24} />
  </label>
  <div class="modal-wrapper">
    <div class="modal-body">
      <label class="modal-close" for={id}>
        <IconCircleX size={24} />
      </label>
      <div set:html={md(content)}></div>
    </div>
  </div>
</>