/**
 * Card 卡片组件
 * 白色背景、圆角、阴影，支持点击
 */

import React, { useMemo } from 'react';
import { View, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
import { borderRadius, spacing, shadows, useAppColors, type AppColors } from '../../theme';

type ShadowSize = 'sm' | 'md' | 'lg';

interface CardProps {
  children: React.ReactNode;
  onPress?: () => void;
  padding?: number;
  shadow?: ShadowSize | 'none';
  style?: ViewStyle;
}

function createCardStyles(colors: AppColors) {
  return StyleSheet.create({
    card: {
      backgroundColor: colors.background.paper,
      borderRadius: borderRadius.lg,
      overflow: 'hidden',
    },
  });
}

const Card: React.FC<CardProps> = ({
  children,
  onPress,
  padding = spacing.lg,
  shadow = 'none',
  style,
}) => {
  const colors = useAppColors();
  const styles = useMemo(() => createCardStyles(colors), [colors]);
  const shadowStyle = shadow !== 'none' ? shadows[shadow as keyof typeof shadows] : undefined;

  const cardStyle = [styles.card, { padding }, shadowStyle].filter(Boolean);

  if (onPress) {
    return (
      <TouchableOpacity
        style={[...cardStyle, style]}
        onPress={onPress}
        activeOpacity={0.95}
      >
        {children}
      </TouchableOpacity>
    );
  }

  return <View style={[...cardStyle, style]}>{children}</View>;
};

export default Card;
