import { cn } from "@/lib/utils";
import { AuthIcon } from "./auth-icon";

interface AuthCardProps {
  icon: React.ReactNode;
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  className?: string;
}

export function AuthCard({
  icon,
  title,
  subtitle,
  children,
  className,
}: AuthCardProps) {
  return (
    <div
      className={cn(
        "w-full max-w-md rounded-2xl bg-background p-6 sm:p-8 md:p-10 overflow-hidden",
        "shadow-[0px_4px_8px_-2px_rgba(16,24,40,0.1),0px_2px_4px_-2px_rgba(16,24,40,0.06)]",
        className
      )}
    >
      <div className="flex flex-col items-center space-y-4 sm:space-y-6">
        <AuthIcon icon={icon} />

        <div className="space-y-1 sm:space-y-2 text-center">
          {/* <h1 className="text-xl sm:text-2xl md:text-3xl lg:text-[2rem] font-bold leading-tight sm:leading-[2.375rem] text-foreground">
            {title}
          </h1> */}
          {subtitle && (
            <p className="text-xs sm:text-sm md:text-base leading-5 sm:leading-6 text-muted-foreground">
              {subtitle}
            </p>
          )}
        </div>

        <div className="w-full">{children}</div>
      </div>
    </div>
  );
}