import React from 'react';
import { View, StyleSheet, ViewStyle } from 'react-native';
import { RADIUS, SPACING, SHADOWS } from '../../theme';
import { useTheme } from '../../theme';

type Elevation = 'none' | 'xs' | 'sm' | 'md' | 'lg';

interface CardProps {
  children: React.ReactNode;
  style?: ViewStyle;
  padding?: number;
  elevation?: Elevation;
}

export function Card({ children, style, padding, elevation = 'sm' }: CardProps) {
  const { theme } = useTheme();
  const shadow = SHADOWS[elevation];

  return (
    <View
      style={[
        styles.card,
        shadow,
        { backgroundColor: theme.surface, borderColor: theme.border },
        padding !== undefined ? { padding } : null,
        style,
      ]}>
      {children}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: RADIUS.xl,
    padding: SPACING.lg,
    borderWidth: 1,
  },
});
