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

  type Props = {
    onChange: (value: string) => void;
    theme?: Extension;
    value: string;
  };

  let { onChange, theme, value }: Props = $props();
</script>

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

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

<div class="headers">
  <div class="label">Headers</div>
  <Editor language="json" {onChange} {theme} {value}/>
</div>
