<script lang="ts">
  import { getCurrentSlide } from "$lib/state.svelte";

  let notes = $state("");

  // Sync with current slide
  $effect(() => {
    const slide = getCurrentSlide();
    notes = slide?.notes || "";
  });

  const handleInput = (e: Event) => {
    const slide = getCurrentSlide();
    if (slide) {
      slide.notes = (e.target as HTMLTextAreaElement).value;
    }
  };
</script>

<div class="notes-editor">
  <label for="notes">notes</label>
  <textarea
    id="notes"
    bind:value={notes}
    oninput={handleInput}
    placeholder="speaker notes for this slide..."
  ></textarea>
</div>

<style>
  .notes-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: #111;
    border-top: 1px solid #222;
    min-height: 100px;
    max-height: 180px;
  }

  label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  textarea {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 4px;
    color: #ccc;
    font-size: 13px;
    padding: 10px;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
  }

  textarea:focus {
    outline: none;
    border-color: #333;
  }

  textarea::placeholder {
    color: #444;
  }
</style>
