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

interface CardProps {
    children: ReactNode;
    className?: string;
    hover?: boolean;
    onClick?: () => void;
}

export const Card = ({ children, className = '', hover = true, onClick }: CardProps) => {
    return (
        <motion.div
            whileHover={hover ? { y: -5, transition: { duration: 0.2 } } : undefined}
            className={`
        bg-white 
        rounded-xl shadow-lg 
        overflow-hidden
        border border-gray-100 
        ${hover ? 'cursor-pointer' : ''}
        ${className}
      `}
            onClick={onClick}
        >
            {children}
        </motion.div>
    );
};