---
interface Props {
	type: | "default" | "optional" | "example" | "spoiler";
	title?: string;
}

const { type, title} = Astro.props;
const isSpoiler = type === 'spoiler'
---

{isSpoiler ? (
  <details class={`callout spoiler`}>
    <summary>
      <span class="title">{title || 'Show spoiler'}</span>
      <span class="badge">{type.toUpperCase()}</span>
    </summary>
    <div class="body">
      <slot />
    </div>
  </details>
) : (
  <div class={`callout ${type}`}>
    {title && <header class="title">{title}</header>}
    <span class="badge">{type.toUpperCase()}</span>
    <div class="body">
      <slot />
    </div>
  </div>
)}

<style>
  .callout {
    --callout-symbol: "";

    @mixin my var(--space-8);

    position: relative;
    padding: var(--space-8) var(--space-8) var(--space-8) var(--space-14);
    border: var(--space-1) solid var(--color-surface-inverse);
    box-shadow: var(--color-shadow);

    &::before {
      content: var(--callout-symbol);

      position: absolute;
      top: 0;
      left: 0;

      display: flex;
      align-items: flex-start;
      justify-content: center;

      width: var(--space-10);
      height: 100%;

      font-family: var(--font-mono);
      font-size: var(--type-4);
      line-height: 1.875;
      color: var(--color-primary);

      background: var(--color-surface-inverse);
    }

    & .title {
      @mixin typo_body-alt;
      @mixin my var(--size-0);

      font-family: var(--font-header);
      font-weight: 900;
      text-transform: uppercase;
    }

    & .badge {
      @mixin px var(--size-4);
      @mixin py var(--size-2);
      @mixin typo_code;

      position: absolute;
      top: 0;
      right: 0;

      color: var(--color-text-inverse);

      background: var(--color-surface-inverse);
    }

    &.example {
      --callout-symbol: '◆';
    }

    &.default {
      --callout-symbol: '‽';
    }

    &.optional {
      --callout-symbol: '★'
    }

    &.spoiler {
      --callout-symbol: "⌧"
    }
  }
</style>
