@props(['title', 'curl'])

@php
    $id = Str::random(8);
@endphp

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
    <!-- Header with Tabs -->
    <div class="bg-gray-50 border-b border-gray-100 flex flex-col sm:flex-row justify-between items-center px-6 py-4">
        <h3 class="text-xl font-bold text-secondary mb-4 sm:mb-0">{{ $title }}</h3>
        
        <div class="flex space-x-2 bg-white p-1 rounded-lg border border-gray-200">
            <button onclick="switchTab('data-{{ $id }}', 'curl-{{ $id }}', this)" class="px-4 py-2 text-sm font-medium rounded-md bg-primary text-white transition-colors">
                Data View
            </button>
            <button onclick="switchTab('curl-{{ $id }}', 'data-{{ $id }}', this)" class="px-4 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 transition-colors">
                cURL View
            </button>
        </div>
    </div>

    <!-- Data View Content -->
    <div id="data-{{ $id }}" class="p-6 block">
        {{ $slot }}
    </div>

    <!-- cURL View Content -->
    <div id="curl-{{ $id }}" class="hidden">
        <div class="bg-[#1e1e1e] p-6">
            <div class="flex justify-between items-center mb-3">
                <span class="text-xs font-semibold text-gray-400 uppercase tracking-widest">Terminal</span>
                <button onclick="copyCurl('curl-text-{{ $id }}')" class="text-xs text-gray-400 hover:text-white flex items-center transition-colors">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                    Copy
                </button>
            </div>
            <pre class="text-green-400 font-mono text-sm overflow-x-auto whitespace-pre-wrap"><code id="curl-text-{{ $id }}">{{ $curl }}</code></pre>
        </div>
    </div>
</div>

<script>
    if (typeof window.switchTab !== 'function') {
        window.switchTab = function(showId, hideId, btn) {
            document.getElementById(hideId).classList.add('hidden');
            document.getElementById(hideId).classList.remove('block');
            
            document.getElementById(showId).classList.add('block');
            document.getElementById(showId).classList.remove('hidden');

            const container = btn.parentElement;
            const buttons = container.querySelectorAll('button');
            buttons.forEach(b => {
                b.classList.remove('bg-primary', 'text-white');
                b.classList.add('text-gray-600', 'hover:text-gray-900');
            });

            btn.classList.remove('text-gray-600', 'hover:text-gray-900');
            btn.classList.add('bg-primary', 'text-white');
        };

        window.copyCurl = function(elementId) {
            const text = document.getElementById(elementId).innerText;
            navigator.clipboard.writeText(text).then(() => {
                alert('cURL copied to clipboard!');
            });
        }
    }
</script>