import { ReactNode } from 'react';

interface CardProps {
    children: ReactNode;
    className?: string;
    hover?: boolean;
    onClick?: () => void;
    variant?: 'default' | 'elevated' | 'outlined';
}

export const Card = ({
    children,
    className = '',
    hover = true,
    onClick,
    variant = 'default'
}: CardProps) => {
    const baseStyles = 'rounded-xl transition-all duration-300';

    const variantStyles = {
        default: 'bg-white/90 border border-gray-100 shadow-sm',
        elevated: 'bg-gradient-to-br from-white/95 to-white/90 shadow-lg border border-gray-50',
        outlined: 'bg-transparent border-2 border-gray-200 hover:border-gray-300'
    };

   

    return (
        <div
            className={`
        ${baseStyles}
        ${variantStyles[variant]}
        ${hover ? 'cursor-pointer' : ''}
        ${className}
      `}
            onClick={onClick}
        >
            {children}
        </div>
    );
};