import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

interface CardProps {
  children: ReactNode;
  className?: string;
  title?: string;
  description?: string;
  icon?: ReactNode;
}

export function Card({ children, className, title, description, icon }: CardProps) {
  return (
    <div
      className={cn(
        "rounded-lg border border-gray-800 bg-gray-900 p-6 shadow-lg",
        className,
      )}
    >
      {(title || icon) && (
        <div className="mb-4 flex items-center gap-3">
          {icon && <div className="text-indigo-400">{icon}</div>}
          <div>
            {title && (
              <h3 className="text-sm font-medium text-gray-400">{title}</h3>
            )}
            {description && (
              <p className="text-xs text-gray-500">{description}</p>
            )}
          </div>
        </div>
      )}
      {children}
    </div>
  );
}
