import { ReactNode } from "react";

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

export function AnimatedCard({
  children,
  className = "",
  variant = "default",
  onClick,
  disabled = false,
}: AnimatedCardProps) {
  const baseClasses =
    "bg-card text-card-foreground rounded-xl border shadow-[var(--cp-shadow-1)] transition-shadow duration-[var(--cp-duration-normal)]";

  const variantClasses: Record<"default" | "highlighted" | "success" | "static", string> = {
    default: "border-border hover:shadow-[var(--cp-shadow-2)]",
    highlighted: "border-primary/35 ring-1 ring-primary/15 hover:shadow-[var(--cp-shadow-2)]",
    success: "border-success/25 ring-1 ring-success/15 hover:shadow-[var(--cp-shadow-2)]",
    static: "border-border shadow-[var(--cp-shadow-1)]", // No hover animations for static containers
  };

  const interactiveClasses = onClick && !disabled ? "cursor-pointer" : "";

  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 };
