import { ReactNode } from "react";

interface AnimatedCardProps {
  children: ReactNode;
  className?: string;
  variant?: "default" | "highlighted" | "success" | "static";
  onClick?: () => void;
  disabled?: boolean;
}

export function AnimatedCard({
  children,
  className = "",
  variant = "default",
  onClick,
  disabled = false,
}: AnimatedCardProps) {
  const baseClasses =
    "bg-white rounded-xl border-2 shadow-sm transition-all duration-300 ease-in-out transform";

  const variantClasses: Record<"default" | "highlighted" | "success" | "static", string> = {
    default: "border-gray-200 hover:shadow-xl hover:-translate-y-1",
    highlighted:
      "border-blue-300 ring-2 ring-blue-100 shadow-md hover:shadow-xl hover:-translate-y-1",
    success:
      "border-green-300 ring-2 ring-green-100 shadow-md hover:shadow-xl hover:-translate-y-1",
    static: "border-gray-200 shadow-sm", // No hover animations for static containers
  };

  const interactiveClasses = onClick && !disabled ? "cursor-pointer hover:scale-[1.02]" : "";

  const disabledClasses = disabled ? "opacity-50 cursor-not-allowed" : "";

  return (
    <div
      className={`${baseClasses} ${variantClasses[variant]} ${interactiveClasses} ${disabledClasses} ${className}`}
      onClick={disabled ? undefined : onClick}
    >
      {children}
    </div>
  );
}

export type { AnimatedCardProps };
