Remark.astro

---
import Icon from "./Icon.astro";

const TYPES = {
  note: { displayName: "Note", icon: "note-sticky" },
  warning: { displayName: "Warning", icon: "warning" },
  important: { displayName: "Important", icon: "exclamation" },
  WIP: { displayName: "WIP", icon: "pen-ruler" },
  deprecated: { displayName: "Deprecated", icon: "trash-can" },
  issue: { displayName: "Issue", icon: "circle-dot" },
};

type RemarkType =
  | "note"
  | "warning"
  | "important"
  | "WIP"
  | "deprecated"
  | "issue";

export interface Props {
  type: RemarkType;
  display?: "fit" | "block" | "compact";
}

const { type, display } = Astro.props;

const remark = TYPES[type];

if (!remark) {
  throw new Error("Invalid remark type: " + type);
}

const classList = [type, "remark", display ?? "block"];
---

<div class:list={classList}>
  <div>
    <Icon name={remark.icon} group="solid" />
    {remark.displayName}
  </div>
  <slot />
</div>

<style lang="scss">
  .remark {
    padding: 0.5em 1em;
    border-radius: 0.4em;
    border-width: 0.3em;
    border-style: outset;
    margin: 1em auto;
    width: fit-content;
    box-shadow: var(--remark-color) 1px 1px 0.5em 0px;
    border-color: var(--remark-color);
    background-color: color-mix(in srgb, var(--remark-color), #071521 80%);

    &.block {
      width: 90%;
    }

    &.compact {
      display: flex;
      align-items: center;
      gap: 0.5em;

      & > :global(*) {
        margin: 0px;
      }
    }

    &.note {
      --remark-color: #0099ff;
    }

    &.warning {
      --remark-color: #c47c00;
    }

    &.important {
      --remark-color: #ba0000;
    }

    &.deprecated {
      --remark-color: #9320ff;
    }

    &.WIP {
      --remark-color: #ff20d6;
    }

    &.issue {
      --remark-color: #2ea043;
    }

    & > div {
      font-size: 1.1em;
      display: flex;
      gap: 0.5em;
      align-items: center;
      font-weight: bold;
    }

    :global(i.fa-solid) {
      font-size: 1.3em;
      color: color-mix(in srgb, var(--remark-color), white 60%);
    }

    & > :global(p) {
      margin: 0.5em auto 0.2em auto;
    }
  }
</style>