import { useQuery } from "@tanstack/react-query";
import { getCardByIdQueryOptions } from "@/lib/queries";
import type { ScryfallId } from "@/lib/scryfall-types";
import { CardImage } from "../CardImage";

interface CardPreviewPaneProps {
	cardId: ScryfallId;
}

export function CardPreviewPane({ cardId }: CardPreviewPaneProps) {
	const { data } = useQuery(getCardByIdQueryOptions(cardId));

	return (
		<div className="flex items-center justify-center">
			{cardId && data && (
				<CardImage
					card={data}
					size="large"
					outerClassName="w-full h-auto"
					imgClassName="shadow-[0_0.5rem_1.875rem_rgba(0,0,0,0.4)] dark:shadow-[0_0.5rem_1.875rem_rgba(0,0,0,0.8)] object-contain"
				/>
			)}
		</div>
	);
}