import React from 'react'
import { useTheme } from '../theme'

const Card = ({ 
  children, 
  title,
  subtitle,
  padding = 'medium',
  shadow = true,
  className = '',
  ...props 
}) => {
  const { theme } = useTheme()
  
  const baseStyles = {
    backgroundColor: theme.surface,
    color: theme.text,
    borderRadius: '12px',
    border: `1px solid ${theme.border}`,
    transition: 'all 0.2s ease-in-out'
  }
  
  const paddingStyles = {
    small: { padding: '16px' },
    medium: { padding: '24px' },
    large: { padding: '32px' }
  }
  
  const shadowStyles = shadow ? {
    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
    ':hover': {
      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      transform: 'translateY(-2px)'
    }
  } : {}
  
  const cardStyles = {
    ...baseStyles,
    ...paddingStyles[padding],
    ...shadowStyles
  }
  
  const titleStyles = {
    margin: '0 0 8px 0',
    fontSize: '20px',
    fontWeight: '600',
    color: theme.text
  }
  
  const subtitleStyles = {
    margin: '0 0 16px 0',
    fontSize: '14px',
    color: theme.textSecondary
  }
  
  return (
    <div
      style={cardStyles}
      className={className}
      {...props}
    >
      {title && <h3 style={titleStyles}>{title}</h3>}
      {subtitle && <p style={subtitleStyles}>{subtitle}</p>}
      {children}
    </div>
  )
}

export default Card