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

  type Props = {
    theme?: Extension;
    value: string;
  };

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

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

<style lang="scss">
  .result {
    display: grid;
    grid-template-rows: auto 1fr;
    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;
  }
</style>

<div class="result">
  <div class="label">Response</div>
  <Editor language="json" onChange={noop} readOnly {theme} {value}/>
</div>
