<script>
  export let title
  export let data
  export let showCanvas = false
  export let showWebGL = false
  export let showAudio = false
  
  let canvas = null
  let webgl = null
  let audio = null
  
  $: if (showCanvas && canvas) {
    const ctx = canvas.getContext('2d')
    ctx.textBaseline = 'top'
    ctx.font = '14px Arial'
    ctx.fillText('Canvas test', 2, 2)
  }
  
  $: if (showWebGL && webgl) {
    const gl = webgl.getContext('webgl') || webgl.getContext('experimental-webgl')
    if (gl) {
      gl.clearColor(0.1, 0.2, 0.3, 1.0)
      gl.clear(gl.COLOR_BUFFER_BIT)
    }
  }
</script>

<div class="section">
  <h2>{title}</h2>
  
  {#if showCanvas}
    <canvas bind:this={canvas} width="300" height="100" style="border: 1px solid #ccc;"></canvas>
  {/if}
  
  {#if showWebGL}
    <canvas bind:this={webgl} width="100" height="100"></canvas>
  {/if}
  
  {#if showAudio}
    <audio bind:this={audio} controls></audio>
  {/if}
  
  <pre>{JSON.stringify(data, null, 2)}</pre>
</div>

<style>
  .section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
  }
  
  .section h2 {
    margin-top: 0;
    color: #495057;
    font-size: 1.2em;
    border-bottom: 2px solid #007bff;
    padding-bottom: 8px;
  }
  
  pre {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.4;
    max-height: 300px;
    overflow-y: auto;
  }
  
  canvas {
    display: block;
    margin: 10px 0;
  }
  
  audio {
    width: 100%;
    margin: 10px 0;
  }
</style>
