import { motion } from 'framer-motion';
import { ReactNode } from 'react';
import { cn } from '../utils/cn';

interface FluidCardProps {
  children: ReactNode;
  className?: string;
  hover?: boolean;
  glow?: boolean;
}

export const FluidCard = ({ children, className, hover = true, glow = false }: FluidCardProps) => {
  return (
    <motion.div
      whileHover={hover ? { y: -4, scale: 1.02 } : {}}
      className={cn(
        "glass-bubble rounded-3xl p-6 transition-all duration-300",
        glow && "shadow-[0_0_30px_rgba(147,51,234,0.3)]",
        className
      )}
    >
      {children}
    </motion.div>
  );
};
