import { Component, For } from "solid-js";
import type { Card as TCard, Hand as THand } from "@games/shared/cards";
import Card from "./Card";
import { Stylable } from "./toolbox";

import "./Hand.css";

export default ((props) => {
	return (
		<div class={"hand " + props.class} style={props.style}>
			<For each={props.hand}>
				{(card, i) => (
					<Card
						card={card}
						style={{
							cursor: "pointer",
						}}
						onClick={() => props.onClickCard?.(card, i())}
					/>
				)}
			</For>
		</div>
	);
}) satisfies Component<
	{ hand: THand; onClickCard?: (card: TCard, i: number) => any } & Stylable
>;