import React from "react";
import QueueRow from "./QueueRow";

const TableQueues = (props) => {
    return (
        <table className="min-w-full">
            <thead className="bg-gray-200 border-b">
            <tr>
                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                    #
                </th>
                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                    Name
                </th>
                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                    Messages
                </th>
            </tr>
            </thead>
            <tbody>
            {/* TO DO : LOOP WITH API DATA*/}
            <QueueRow number="1" name="Name/URL of the queue" msg="45"/>
            <QueueRow number="2" name="Name/URL of the queue" msg="45"/>
            <QueueRow number="3" name="Name/URL of the queue" msg="45"/>
            <QueueRow number="4" name="Name/URL of the queue" msg="45"/>
            <QueueRow number="5" name="Name/URL of the queue" msg="45" classname="bg-sky-100"/>
            </tbody>

        </table>
    )}

export default TableQueues