import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";


export default function RaidInstanceCreatorTableHeader({
	onClickHeaderCell
}:{
	onClickHeaderCell: (slot: number) => void;
}){
	const { selectedClassGroups } = useRaidInstanceContext();


	return (
		<thead>
			<tr
				id="instanceTableHead"
			>
				{
					selectedClassGroups.map((classGroup, index) => (
						<th
							key={index}
							className="px-4 py-2 border-2 cursor-pointer"
							onClick={() => onClickHeaderCell(index)}
						>
							{classGroup?.classGroupName ?? "Any"}
						</th>
					))
				}
				<th
					className="px-4 py-2"
				>
					&nbsp;
				</th>
			</tr>
		</thead>
	);
}