"use client";

import React from 'react';
import { motion } from 'framer-motion';

interface CardProps {
  children: React.ReactNode;
  className?: string;
  onClick?: () => void;
  delay?: number;
  noPadding?: boolean;
}

export const Card: React.FC<CardProps> = ({ children, className = '', onClick, delay = 0, noPadding = false }) => {
  return (
    // Fix: cast props to any to avoid framer-motion type errors
    <motion.div
      {...({
        initial: { opacity: 0, y: 20 },
        animate: { opacity: 1, y: 0 },
        transition: { duration: 0.4, delay: delay, ease: [0.22, 1, 0.36, 1] },
        whileHover: onClick ? { scale: 1.02 } : {}
      } as any)}
      onClick={onClick}
      className={`
        relative overflow-hidden
        bg-white/80 backdrop-blur-xl
        border border-white/20
        shadow-[0_8px_30px_rgb(0,0,0,0.04)]
        rounded-3xl
        ${noPadding ? '' : 'p-6'}
        ${onClick ? 'cursor-pointer transition-all' : ''}
        ${className}
      `}
    >
      {children}
    </motion.div>
  );
};