@props([
    "type",
    "id",
    "size" => "sm",
])

@auth
    <button
        @click="openReportModal('{{ $type }}', {{ is_numeric($id) ? $id : "comment.id" }})"
        class="inline-flex items-center @if($size === 'sm') px-2 py-1 text-xs @else px-3 py-2 text-sm @endif text-gray-500 hover:text-red-600 rounded-md hover:bg-red-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-transparent hover:border-red-200"
        title="{{ __("app.report_content") }}"
    >
        <svg
            class="@if($size === 'sm') h-4 w-4 @else h-5 w-5 @endif"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
        >
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3 3l1.664 1.664M21 21l-1.5-1.5M9.879 9.879l4.242 4.242M9.879 9.879A3 3 0 1 0 6.464 6.464M9.879 9.879L2.586 2.586M21.414 21.414L14.121 14.121M14.121 14.121A3 3 0 1 0 17.586 10.586m-3.465 3.535L7.5 21.5 3 21l.5-4.5 6.621-6.621"
            />
        </svg>

        @if ($size !== "sm")
            <span class="ml-1">{{ __("app.report") }}</span>
        @endif
    </button>
@endauth