// ./src/stories/QueueRow.jsx

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

/**
 * A queue as described in a list.
 */
const QueueRow = ({
                      arn = undefined,
                      itemCount = undefined,
                      qName = undefined,
                      url = undefined,
                      index = undefined,
                      ...props
                  }) => {
    if (arn === undefined || arn == null) {
        arn = '';
    }
    if (itemCount === undefined || itemCount === null || itemCount === '') {
        itemCount = '-';
    }

    return (
        <>
            <tr className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                <td className="px-6 py-4 whitespace-nowrap text-sm font-extralight text-gray-900">{index}</td>
                <td className="text-sm text-gray-900x font-light px-6 py-4 url"><Link text={qName} url={url} /></td>
                <td className="text-sm text-gray-900 font-light px-6 py-4">{arn}</td>
                <td className="text-sm text-gray-900 font-light px-6 py-4">{itemCount}</td>
                <td><button>Detail</button></td>
            </tr>
            <React.StrictMode/>
        </>
    )
}

export {
    QueueRow,
}