<script>
  let { title = "", id = "", children } = $props();
</script>

<main {id}>
  {#if title === ""}
    <div>{@render children()}</div>
  {:else}
    <h1>{title}</h1>
    <div class="padded">{@render children()}</div>
  {/if}
</main>

<style>
  main {
    display: flex;
    flex-direction: column;
    height: min-content;
  }

  main h1 {
    font-family: var(--monospace);
    font-size: var(--size-6);

    color: var(--white-1);
    background: var(--black-1);

    position: relative;
    top: 20px;
    right: 7px;

    width: min-content;
    padding-right: 10px;
  }

  main h1::before {
    color: var(--white-3);
    content: "#";
    margin: 0 10px 0 0;
  }

  main div {
    color: var(--white-2);

    font-size: var(--size-3);
    line-height: 1.5em;
    word-wrap: break-word;

    flex: 1;
    align-items: center;
  }

  main .padded {
    padding: 25px 20px 18px 20px;
    border: solid 1px var(--black-3);
  }
</style>
