{% stories comment with { title: 'Components/Comment' } %}

{% story default with {
    name: '1. Comment - With Comments',
    args: { 
      children: '<section class="field comment-wrapper py-6">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700 shadow-sm">
    <h2 class="title text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">Comments (3)</h2>
    
    <div class="comments-list space-y-4 mb-8">
      <!-- Comment 1 -->
      <div class="comment p-4 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700">
        <div class="comment-header flex items-start gap-3 mb-3">
          <div class="w-10 h-10 bg-primary text-white flex items-center justify-center font-semibold text-sm">JD</div>
          <div class="flex-1">
            <div class="font-semibold text-gray-900 dark:text-gray-100">John Doe</div>
            <div class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</div>
          </div>
        </div>
        <div class="comment-body text-gray-700 dark:text-gray-300">
          Great article! This really helped me understand the concepts better.
        </div>
      </div>
      
      <!-- Comment 2 -->
      <div class="comment p-4 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700">
        <div class="comment-header flex items-start gap-3 mb-3">
          <div class="w-10 h-10 bg-secondary text-white flex items-center justify-center font-semibold text-sm">AS</div>
          <div class="flex-1">
            <div class="font-semibold text-gray-900 dark:text-gray-100">Alice Smith</div>
            <div class="text-xs text-gray-500 dark:text-gray-400">1 day ago</div>
          </div>
        </div>
        <div class="comment-body text-gray-700 dark:text-gray-300">
          Thanks for sharing this. Do you have any recommendations for further reading?
        </div>
      </div>
    </div>
    
    <div class="comment-form-wrapper border-t border-gray-200 dark:border-gray-700 pt-6">
      <h3 class="title text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Add new comment</h3>
      <form class="space-y-4">
        <div class="form-item">
          <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Your Comment</label>
          <textarea class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary focus:border-primary" rows="4" placeholder="Share your thoughts..."></textarea>
        </div>
        <button type="submit" class="px-4 py-2 bg-primary text-white hover:opacity-90 transition-opacity">Post Comment</button>
      </form>
    </div>
  </div>
</section>
'
    }
  } %}
{% embed 'components:comment' %}{% endembed %}
{% endstory %}

{% story empty with {
    name: '2. Comment - No Comments Yet',
    args: { 
      children: '<section class="field comment-wrapper py-6">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700 shadow-sm">
    <h2 class="title text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">Comments</h2>
    
    <div class="text-center py-8 text-gray-500 dark:text-gray-400 mb-8">
      <svg class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
      </svg>
      <p class="text-lg">No comments yet. Be the first to share your thoughts!</p>
    </div>
    
    <div class="comment-form-wrapper border-t border-gray-200 dark:border-gray-700 pt-6">
      <h3 class="title text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Add new comment</h3>
      <form class="space-y-4">
        <div class="form-item">
          <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Your Comment</label>
          <textarea class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary focus:border-primary" rows="4" placeholder="Share your thoughts..."></textarea>
        </div>
        <button type="submit" class="px-4 py-2 bg-primary text-white hover:opacity-90 transition-opacity">Post Comment</button>
      </form>
    </div>
  </div>
</section>
'
    }
  } %}
{% embed 'components:comment' %}{% endembed %}
{% endstory %}

{% endstories %}
