const Card = ({
  children,
  className = '',
  glass = false,
  noPadding = false,
  onClick = null,
  gradient = false,
}) => {
  const baseStyles = `
    rounded-2xl transition-all duration-300
    ${glass
      ? 'backdrop-blur-2xl bg-white/10 border border-white/20 shadow-2xl'
      : gradient
        ? 'bg-gradient-to-br from-white to-[#F0F7F9] shadow-xl border border-[#a2d4da]/60 hover:shadow-2xl hover:border-[#409CA4]/30'
        : 'bg-white shadow-lg border border-[#c0e0e4]/60 hover:shadow-xl hover:border-[#409CA4]/20'
    }
    ${!noPadding ? 'p-6' : ''}
    ${onClick ? 'cursor-pointer' : ''}
  `

  return (
    <div onClick={onClick} className={`${baseStyles} ${className}`}>
      {children}
    </div>
  )
}

export default Card
