import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { icons } from "lucide-react";

interface GenericIconProps {
	name: keyof typeof icons;
	className: string;
}

function GenericIcon(props: GenericIconProps) {
	const { name, className } = props;
	const LucideIcon = icons[name];

	return <LucideIcon className={className} />;
}

interface DataCardProps {
	title: string;
	description?: string;
	value: string | number;
	icon: keyof typeof icons;
}

export function DataCard(props: DataCardProps) {
	const { title, description, value, icon } = props;

	return (
		<Card className="w-full">
			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
				<CardTitle className="text-sm font-medium">{title}</CardTitle>
				<GenericIcon name={icon} className="h-4 w-4 text-muted-foreground" />
			</CardHeader>
			<CardContent>
				<div className="text-2xl font-bold">{value}</div>
				<p className="text-xs text-muted-foreground">&nbsp;</p>
			</CardContent>
		</Card>
	);
}