import { useMissionsStore } from "_store/missionsStore";

export const Missions = () => {
	const { missions } = useMissionsStore();

	return (
		<div>
			<table className="table table-xs">
				<thead>
					<tr>
						<th>ID</th>
						<th>Einsatzmittel</th>
						<th>Ort</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					{missions.map((mission) => (
						<tr key={mission.id}>
							<td>{mission.id}</td>
							<td>{mission.missionCategory}</td>
							<td>
								{mission.addressStreet}, {mission.addressCity}
							</td>
							<td>
								<button className="btn btn-sm">Details</button>
							</td>
						</tr>
					))}
				</tbody>
			</table>
		</div>
	);
};