import React from "react";

type CardType =
	| "Action"
	| "Treasure"
	| "Victory"
	| "Curse"
	| "Reaction"
	| "Duration"
	| "Reserve"
	| "Night"

type CardData = {
	name: string,
	text: string,
	cost: string,
	preview: string,
	types: Array<CardType>,
	art: string,
	artCredit: string,
	v: number,
}

const drawCard = (canvas: HTMLCanvasElement, card: CardData) => {
	const context = canvas.getContext("2d");
	if (!context) {
		throw new Error("Could not get the context of the canvas");
	}
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.font = "88px myTitle"
	context.fillText(card.name, 100, 100);
}

export const Card = (props: {card: CardData}) => {
	const {
		card
	} = props;
	return <canvas className="card" width={1403} height={2151} ref={(el) => {
		if (el) {
			drawCard(el, card);
		}
	}}></canvas>
}