@props([
    "comment",
])

<div
    class="bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
>
    {{-- En-tête avec info sur la confession commentée --}}
    <div
        class="px-6 py-4 relative text-white {{ $comment->confession->category?->getTailwindHeaderClass() ?? "category-default-header" }}"
    >
        <div class="flex justify-between items-center text-sm">
            <div class="flex items-center">
                <span
                    class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{ $comment->confession->category?->getTailwindCategoryClass() ?? "category-default" }} shadow"
                >
                    {{ $comment->confession->category->translatedName ?? __("dashboard.no_category") }}
                </span>
            </div>
            <div class="flex items-center text-xs opacity-80">
                <svg
                    class="w-4 h-4 mr-1"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                >
                    <path
                        fill-rule="evenodd"
                        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                        clip-rule="evenodd"
                    />
                </svg>
                <span>{{ $comment->created_at->format("d M Y") }}</span>
            </div>
        </div>
    </div>

    {{-- Corps de la carte --}}
    <div class="p-6">
        {{-- Titre de la confession commentée --}}
        <h4 class="text-lg font-bold text-gray-800 mb-2 break-words">
            {{ __("dashboard.comment_on") }}:
            "{{ Str::words($comment->confession->title, 16) }}"
        </h4>

        {{-- Contenu du commentaire --}}
        <div class="bg-gray-50 rounded-lg p-4 mb-4">
            <p class="text-gray-700 text-sm italic" style="text-align: justify;">
                "{{ $comment->content }}"
            </p>
        </div>

        {{-- Stats et actions --}}
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4 text-sm text-gray-500">
                <span class="flex items-center">
                    <svg
                        class="w-4 h-4 mr-1 text-green-500"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                    >
                        <path
                            d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
                        />
                    </svg>
                    {{ $comment->upvotes }}
                </span>
                <span class="flex items-center">
                    <svg
                        class="w-4 h-4 mr-1 text-red-500"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                    >
                        <path
                            d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.057 2H5.641a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z"
                        />
                    </svg>
                    {{ $comment->downvotes }}
                </span>
                @if ($comment->replies->count() > 0)
                    <span class="flex items-center">
                        <svg
                            class="w-4 h-4 mr-1 text-blue-500"
                            fill="currentColor"
                            viewBox="0 0 20 20"
                        >
                            <path
                                fill-rule="evenodd"
                                d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
                                clip-rule="evenodd"
                            />
                        </svg>
                        {{ $comment->replies->count() }}
                        {{ __("dashboard.replies") }}
                    </span>
                @endif
            </div>

            <a
                href="{{ route("confession.show", $comment->confession->id) }}#comment-{{ $comment->id }}"
                class="btn-icon-link"
            >
                <svg
                    class="w-4 h-4 mr-2"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                    />
                </svg>
                <span>{{ __("dashboard.view_comment") }}</span>
            </a>
        </div>
    </div>
</div>