/**
 * @ai-summary Glass morphism card component for mobile UI
 */

import React from 'react';
import { clsx } from 'clsx';

interface GlassCardProps {
  children: React.ReactNode;
  className?: string;
  padding?: 'none' | 'sm' | 'md' | 'lg';
  onClick?: () => void;
}

export const GlassCard: React.FC<GlassCardProps> = ({
  children,
  className,
  padding = 'md',
  onClick,
}) => {
  const paddings = {
    none: '',
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-6',
  };
  
  return (
    <div 
      className={clsx(
        'rounded-3xl border border-slate-200/70 dark:border-slate-700/70 bg-white/80 dark:bg-nero/80 shadow-sm backdrop-blur',
        paddings[padding],
        onClick && 'cursor-pointer hover:shadow-xl hover:-translate-y-0.5 transition',
        className
      )}
      onClick={onClick}
    >
      {children}
    </div>
  );
};