<script lang="ts">
  import Editor from "./Editor.svelte";
  import type { Extension } from "@codemirror/state";
  import type { Snippet } from "svelte";

  type Props = {
    footer?: Snippet<[{ result: string }]>;
    theme?: Extension;
    value: string;
  };

  let { footer, theme, value }: Props = $props();

  function noop(_v: string) {}
</script>

<style lang="scss">
  .result {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    min-height: 0;
  }

  .label {
    background: var(--graphiql-panel, #252526);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    text-transform: uppercase;
  }

  .footer {
    background: var(--graphiql-panel, #252526);
    border-top: 1px solid var(--graphiql-border, #333);
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }
</style>

<div class="result">
  <div class="label">Response</div>
  <Editor language="json" onChange={noop} readOnly {theme} {value}/>
  {#if footer}
    <div class="footer">{@render footer({ result: value })}</div>
  {/if}
</div>
