import { View, TouchableOpacity, ViewStyle } from 'react-native'
import { cn } from '../../lib/utils'

// Keep shadow style for now as it's often better handled natively than via Tailwind utilities for cross-platform consistency
// OR use nativewind shadow classes if configured properly. Let's use Tailwind classes for shadow to align with the system if possible, 
// but often standard CSS shadows don't map perfectly to RN shadow props (elevation vs shadowOffset).
// For specific "card" feel, we might want to keep a consistent shadow.
// However, the prompt asked for "10x better" design.

interface CardProps {
  children: React.ReactNode
  onPress?: () => void
  className?: string
  noPadding?: boolean
}

export function Card({ children, onPress, className = '', noPadding = false }: CardProps) {
  const baseClasses = cn(
    'bg-card rounded-xl border border-border shadow-sm',
    !noPadding && 'p-4',
    className
  )

  if (onPress) {
    return (
      <TouchableOpacity
        onPress={onPress}
        className={baseClasses}
        activeOpacity={0.8}
      >
        {children}
      </TouchableOpacity>
    )
  }
  return (
    <View className={baseClasses}>
      {children}
    </View>
  )
}