import * as React from "react"
// import { CONSTANTS } from "../constants"
import { IReportStatSPOT } from "../types"

export const ReportStatSPOT: React.FC<IReportStatSPOT> = props => {
	const { activeExchanges } = props

	const tableHeadListItems = activeExchanges.map(
		(item: any, index: number) => {
			return (
				<th scope="col" key={index}>
					{item.shortName}
				</th>
			)
		}
	)

	return (
		<div className="row">
			<table className="table table-hover table-striped table-sm">
				<thead>
					<tr className="bg-dark text-white">
						<th scope="col">Parameters</th>
						{tableHeadListItems}
						<th scope="col">Total, $</th>
					</tr>
				</thead>
				<tbody>{}</tbody>
				<tfoot>
					{/* 	<tr>
						<td></td>
						<td className={`table-`}></td>
						<td className={`table-`}></td>
						<td className={`table-`}></td>
						<td className={`table-`}></td>
						<td className={`table-`}></td>
						<td className={`table-`}></td>
						<td className={`table-`}></td>
						<td className={`table-`}></td>
					</tr> */}
				</tfoot>
			</table>
		</div>
	)
}
