<?php

namespace App\View\Ui;

use Illuminate\View\Component;

class Table extends Component
{

    public function __construct(public string $mode = 'dark')
    {
    }

    public function render()
    {
        return <<<'HTML'
            <div class="@container/table">
                <table cellpadding="0" cellspacing="0" border="0" class="w-full @if ($mode === 'dark') table-dark @else table-light @endif
                    [&_th]:text-left [&_th]:px-2 [&_th]:@4xl/table:px-6 [&_th]:text-gray-200 [&_th]:font-semibold [&_th]:py-3 [&_th]:border-gray-600 [&_th]:border-b
                    [&_tbody_tr]:text-gray-200 [&_tbody_tr]:duration-300 [&_tbody_tr]:rounded [&_tbody_tr:hover]:bg-gray-800
                    [&_tr_td]:py-1 [&_tr_td]:px-2 [&_tr_td]:@4xl/table:px-6
                    [&.table-light_th]:border-gray-500 [&.table-light_tbody_tr:hover]:bg-gray-700


                    ">
                    {{ $slot }}
                </table>
            </div>
        HTML;
    }
}
