@props([
    'emptyMessage' => 'No records found.',
    'paginator' => null,
])

<div class="data-table-wrapper">
    @if(isset($header))
    <div class="data-table-header">
        {{ $header }}
    </div>
    @endif

    <div class="data-table-container">
        <table class="data-table">
            @if(isset($thead))
            <thead class="data-table-thead">
                <tr>
                    {{ $thead }}
                </tr>
            </thead>
            @endif

            <tbody class="data-table-tbody">
                @if(isset($tbody) && $tbody->isNotEmpty())
                    {{ $tbody }}
                @else
                <tr>
                    <td colspan="100" class="data-table-empty">
                        <div class="data-table-empty-content">
                            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                                <circle cx="24" cy="24" r="24" fill="#F1F5F9"/>
                                <path d="M16 20h16M16 26h10" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/>
                                <rect x="12" y="14" width="24" height="20" rx="3" stroke="#94A3B8" stroke-width="1.5"/>
                            </svg>
                            <p>{{ $emptyMessage }}</p>
                        </div>
                    </td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>

    @if(isset($paginator) && $paginator)
    <div class="data-table-footer">
        <x-pagination :paginator="$paginator" />
    </div>
    @endif
</div>