const MediaCard = ({ icon: Icon, label, sub }: { icon: React.ElementType; label: string; sub: string }) => (
	<div className="group/m flex cursor-pointer flex-col items-center gap-2 rounded-[9px] border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center transition-colors hover:border-teal-400 hover:bg-teal-50">
		<Icon className="size-6 text-gray-400 transition-colors group-hover/m:text-teal-500" />
		<div className="text-[13px] font-medium text-gray-600">{label}</div>
		<div className="text-[11px] text-gray-400">{sub}</div>
	</div>
);

export default MediaCard;