export default function SkeletonTable() {

    return (

        <div>
            <div role="status" aria-busy="true" aria-label="Carregando tabela" className="p-4 w-full">

                <div className="overflow-x-auto">
                    <table className="w-full border-collapse">
                        <thead>
                            <tr>
                                <th className="px-4 py-2 text-left">
                                    <div className="h-4 w-20 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </th>
                                <th className="px-4 py-2 text-left">
                                    <div className="h-4 w-28 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </th>
                                <th className="px-4 py-2 text-left">
                                    <div className="h-4 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </th>
                                <th className="px-4 py-2 text-left">
                                    <div className="h-4 w-16 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr className="border-t">
                                <td className="px-4 py-3">
                                    <div className="h-4 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                                <td className="px-4 py-3">
                                    <div className="h-4 w-32 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                                <td className="px-4 py-3">
                                    <div className="h-4 w-20 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                                <td className="px-4 py-3">
                                    <div className="h-4 w-16 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                            </tr>

                            <tr className="border-t">
                                <td className="px-4 py-3">
                                    <div className="h-4 w-20 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                                <td className="px-4 py-3">
                                    <div className="h-4 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                                <td className="px-4 py-3">
                                    <div className="h-4 w-28 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                                <td className="px-4 py-3">
                                    <div className="h-4 w-16 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                            </tr>

                            <tr className="border-t">
                                <td className="px-4 py-3">
                                    <div className="h-4 w-28 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                                <td className="px-4 py-3">
                                    <div className="h-4 w-20 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                                <td className="px-4 py-3">
                                    <div className="h-4 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                                <td className="px-4 py-3">
                                    <div className="h-4 w-16 bg-gray-200 dark:bg-slate-700 rounded animate-pulse"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    );

}