import Image, { StaticImageData } from "next/image";
import { ReactNode } from "react";

type ResourceCardProps = {
	title?: string;
	description?: string;
	btnLabel?: string;
	imageAlt?: string;
	image?: StaticImageData;
	btnHref?: string;
	BtnIcon: ReactNode;
};

export default function ResourceCard({
	title,
	BtnIcon,
	description,
	btnLabel: downloadLabel,
	imageAlt,
	image,
	btnHref: downloadHref,
}: ResourceCardProps) {
	return (
		<div className="hero bg-base-200 rounded-xl shadow-lg p-8">
			<div className="hero-content flex-col lg:flex-row">
				{image && (
					<div className="max-w-sm w-full">
						<Image src={image} alt={imageAlt ?? ""} width={600} className="rounded-lg shadow-2xl" />
					</div>
				)}
				<div className="lg:ml-10 mt-6 lg:mt-0">
					<h1 className="text-3xl font-bold">{title}</h1>
					<p className="py-2 max-w-2xl text-base">{description}</p>
					<a href={downloadHref} className="btn btn-primary mt-4">
						{BtnIcon}
						{downloadLabel}
					</a>
				</div>
			</div>
		</div>
	);
}