/**
 * Reusable component for displaying choice inventory data in a table
 *
 * @param root0
 * @param root0.choices       The choices to display
 * @param root0.inventoryData The inventory data for each choice
 */
export function ChoicesTable({
	choices,
	inventoryData,
}: {
	choices: Array<{ value: string; text: string }>;
	inventoryData: Record<string, number | string>;
}) {
	return (
		<div className="inventory-choices">
			<table
				className="gform-table gform-table--responsive gform-table--no-outer-border gform-table--license-ui form-table"
				style={{ marginTop: 0, border: 'none' }}
			>
				<thead>
					<tr
						style={{
							border: 'none',
							background: 'white',
						}}
					>
						<th scope="col" style={{ border: 'none' }}>
							Choices
						</th>
						<th
							scope="col"
							style={{
								textAlign: 'center',
								border: 'none',
							}}
						>
							Inventory
						</th>
					</tr>
				</thead>
				<tbody>
					{choices.map((choice, index) => {
						const available = inventoryData[choice.value] ?? 'N/A';
						// Alternate row colors
						const rowBackground =
							index % 2 === 0 ? '#f7f9fc' : 'white';

						return (
							<tr
								key={choice.value}
								style={{
									border: 'none',
									background: rowBackground,
								}}
							>
								<td
									data-header="Choice"
									style={{
										textAlign: 'left',
										border: 'none',
									}}
								>
									<p>{choice.text}</p>
								</td>
								<td
									data-header="Inventory"
									style={{
										border: 'none',
										textAlign: 'center',
									}}
								>
									<p>{available}</p>
								</td>
							</tr>
						);
					})}
				</tbody>
			</table>
		</div>
	);
}