import { Component, For, JSX } from "solid-js";
import Card from "./Card";
import { Pile } from "../types/cards";
import { type ComponentProps } from "solid-js";
import { Clickable, Stylable } from "./toolbox";

export default ((props) => {
	return (
		<div
			{...props}
			class={`center ${props.class ?? ""}}`.trim()}
			style={{
				width: "200px",
				height: "400px",
				...(props.style as JSX.CSSProperties),
			}}
			onClick={props.onClick}
		>
			<For each={props.pile}>
				{(card, i) => (
					<Card
						card={card}
						face="down"
						style={{
							position: "absolute",
							transform: `translate(${i() * 0.5}px, ${
								i() * 0.2
							}px)`,
							// "z-index": 100 - i(),
							border: `0.1px solid rgb(${
								10 + i() + Math.random() * 50
							}, ${10 + i() + Math.random() * 50}, ${
								10 + i() + Math.random() * 50
							});`,
						}}
					/>
				)}
			</For>
		</div>
	);
}) satisfies Component<
	{
		pile: Pile;
	} & Stylable &
		Clickable
>;