// ./src/stories/TableRows.js

import React from 'react';
import {QueueRow} from "./QueueRow";

/**
 * A list of queues.
 *
 * @param rows
 * @returns {JSX.Element}
 * @constructor
 */
const TableRows = ({rows = []}) => {
    return (
        <>
            {rows === [] ? <p>Empty</p> : (
            <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">
                        Nom
                    </th>
                    <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                        ARN
                    </th>
                    <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                    Messages
                    </th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                {rows.map((row, index) => {
                    return <QueueRow key={index}
                                     index={index + 1}
                                     arn={row.props.arn}
                                     itemCount={row.props.itemCount}
                                     qName={row.props.qName}
                                     url={row.props.url}/>
                })}
                </tbody>
                <React.StrictMode/>
            </table>
            )}
        </>
    );
}

export {
    TableRows,
}