@props(['headers', 'rows', 'isTextRight' => true])

<div class="relative overflow-x-auto shadow sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
        <tr>
            @foreach($headers as $header)
                <th scope="col" class="px-6 py-1">
                    {{ $header }}
                </th>
            @endforeach
        </tr>
        </thead>
        <tbody>
        @foreach($rows as $row)
            <tr class="bg-white border-b">
                @foreach($row as $index => $item)
                    @if($index == 0)
                        <th scope="row" class="px-6 font-medium text-gray-900 whitespace-nowrap">
                            {{ $item }}
                        </th>
                    @else
                        <td class="px-6 {{ $isTextRight ? 'text-right' : '' }}">
                            {{ $item }}
                        </td>
                    @endif
                @endforeach
            </tr>
        @endforeach
        </tbody>
    </table>
</div>