{% stories file_link with { title: 'Components/FileLink' } %}

{% story default with {
    name: '1. File Link - PDF Document',
    args: { 
      children: '<span class="file-link inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150 text-gray-900 dark:text-gray-100 text-sm shadow-sm">
  <svg class="w-5 h-5 text-red-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
  </svg>
  <a href="#" class="file-link-text font-medium hover:text-primary">Annual Report 2025.pdf</a>
  <span class="file-size text-xs text-gray-500 dark:text-gray-400">(2.4 MB)</span>
</span>
'
    }
  } %}
{% embed 'components:file-link' %}{% endembed %}
{% endstory %}

{% story image with {
    name: '2. File Link - Image File',
    args: { 
      children: '<span class="file-link inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150 text-gray-900 dark:text-gray-100 text-sm shadow-sm">
  <svg class="w-5 h-5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
  </svg>
  <a href="#" class="file-link-text font-medium hover:text-primary">product-photo.jpg</a>
  <span class="file-size text-xs text-gray-500 dark:text-gray-400">(1.8 MB)</span>
</span>
'
    }
  } %}
{% embed 'components:file-link' %}{% endembed %}
{% endstory %}

{% story zip with {
    name: '3. File Link - ZIP Archive',
    args: { 
      children: '<span class="file-link inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150 text-gray-900 dark:text-gray-100 text-sm shadow-sm">
  <svg class="w-5 h-5 text-yellow-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
  </svg>
  <a href="#" class="file-link-text font-medium hover:text-primary">project-files.zip</a>
  <span class="file-size text-xs text-gray-500 dark:text-gray-400">(15.7 MB)</span>
</span>
'
    }
  } %}
{% embed 'components:file-link' %}{% endembed %}
{% endstory %}

{% endstories %}
