"use client";

import { motion } from "framer-motion";
import { ReactNode } from "react";

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

const SHADOW_BASE = "0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06)";
const SHADOW_ELEVATED = "0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07)";

export function AnimatedCard({
  children,
  className = "",
  variant = "default",
  onClick,
  disabled = false,
}: AnimatedCardProps) {
  const baseClasses = "bg-card text-card-foreground rounded-xl border";

  const variantClasses: Record<"default" | "highlighted" | "success" | "static", string> = {
    default: "border-border",
    highlighted: "border-primary/35 ring-1 ring-primary/15",
    success: "border-success/25 ring-1 ring-success/15",
    static: "border-border",
  };

  const interactiveClasses = onClick && !disabled ? "cursor-pointer" : "";
  const disabledClasses = disabled ? "opacity-50 cursor-not-allowed" : "";

  const isStatic = variant === "static" || disabled;

  return (
    <motion.div
      className={`${baseClasses} ${variantClasses[variant]} ${interactiveClasses} ${disabledClasses} ${className}`}
      initial={{ boxShadow: SHADOW_BASE }}
      whileHover={isStatic ? {} : { boxShadow: SHADOW_ELEVATED }}
      transition={{ duration: 0.2 }}
      onClick={disabled ? undefined : onClick}
    >
      {children}
    </motion.div>
  );
}

export type { AnimatedCardProps };
