import { drawCard, loadImages } from "../draw.ts";
import { DominionCard } from "../types.ts";

const sizeMap = {
	card: {
		width: 1403,
		height: 2151,
	},
	landscape: {
		width: 2151,
		height: 1403,
	}
}

export const Card = (props: {card: DominionCard}) => {
	const {card} = props;
	const {width, height} = sizeMap[card.orientation];
	return <canvas style={{width: "2.5in"}} width={width} height={height} ref={async (canvasElement) => {
		if (canvasElement) {
			const context = canvasElement.getContext("2d");
			if (context) {
				await loadImages();
				// await loadFonts();
				drawCard(context, card);
			}
		}
	}}></canvas>
}