{% stories audio with { title: 'Components/Audio' } %}

{% story default with {
    name: '1. Audio - Default',
    args: { 
      children: '<div class="audio-wrapper max-w-2xl p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm">
  <div class="mb-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Sample Audio Track</div>
  <audio class="w-full h-12" controls>
    <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    <p class="text-sm text-gray-700 dark:text-gray-300">Your browser does not support the audio element.</p>
  </audio>
</div>
'
    }
  } %}
{% embed 'components:audio' %}{% endembed %}
{% endstory %}

{% story podcast with {
    name: '2. Audio - Podcast Style',
    args: { 
      children: '<div class="audio-wrapper max-w-3xl p-6 bg-gradient-to-r from-primary/10 to-secondary/10 border border-primary/20 shadow-md">
  <div class="flex items-start gap-4 mb-4">
    <div class="w-20 h-20 bg-primary flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">
      EP
    </div>
    <div class="flex-1">
      <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-1">Episode 42: The Future of Web Development</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Duration: 45:30 • Released: Nov 5, 2025</p>
    </div>
  </div>
  <audio class="w-full h-12" controls>
    <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mpeg">
    <p class="text-sm text-gray-700 dark:text-gray-300">Your browser does not support the audio element.</p>
  </audio>
</div>
'
    }
  } %}
{% embed 'components:audio' %}{% endembed %}
{% endstory %}

{% endstories %}
