@props(['comment'])

<div class="border-l-2 border-stone-200 dark:border-stone-800 pl-4 mb-6">
    <div class="flex items-center gap-2 text-sm font-sans text-stone-500 dark:text-stone-500 mb-2">
        <span class="font-medium text-stone-900 dark:text-stone-100">{{ $comment->author_label }}</span>
        <span>·</span>
        <time>{{ $comment->created_at?->diffForHumans() }}</time>
    </div>
    <p class="text-stone-700 dark:text-stone-300 leading-relaxed">{{ $comment->body }}</p>

    @if($comment->replies->isNotEmpty())
        <div class="mt-4 ml-4">
            @foreach($comment->replies as $reply)
                @include('partials.comment-item', ['comment' => $reply])
            @endforeach
        </div>
    @endif
</div>