<script lang="ts">
  import { editorStore } from '../../stores/editor';
  import Editor from '../Editor.svelte';
  
  function handleChange(event: CustomEvent<string>) {
    editorStore.setContent(event.detail);
  }
</script>

<div class="editor-panel">
  <Editor
    value={$editorStore.content}
    language={$editorStore.language}
    theme={$editorStore.theme}
    on:change={handleChange}
  />
</div>

<style>
  .editor-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(11, 10, 9, 0.4);
    min-width: 0;
  }
</style>