import React, { type ReactNode } from "react";
import { cn } from "../lib/utils";

interface InfoCardProps {
    icon: ReactNode;
    title: string;
    description: string;
    iconWrapperClassName?: string;
    className?: string;
}

export function InfoCard({
    icon,
    title,
    description,
    iconWrapperClassName,
    className,
}: InfoCardProps) {
    return (
        <div className={cn("space-y-4 p-6 glass-card rounded-2xl hover:bg-white/5 transition-colors", className)}>
            <div className={cn("w-12 h-12 rounded-xl flex items-center justify-center mb-4", iconWrapperClassName)}>
                {icon}
            </div>
            <h3 className="text-xl font-bold text-primary">{title}</h3>
            <p className="text-muted-foreground text-step--1">
                {description}
            </p>
        </div>
    );
}