import React from 'react';
import { View, StyleSheet, type ViewProps } from 'react-native';
import { colors, radius, spacing } from '@shared/theme';

interface CardProps extends ViewProps {
  children: React.ReactNode;
  padding?: number;
}

/**
 * Container card com fundo surface e borda sutil.
 */
export function Card({ children, padding = spacing[4], style, ...props }: CardProps): React.ReactElement {
  return (
    <View style={[styles.card, { padding }, style]} {...props}>
      {children}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.bgSurface,
    borderRadius: radius.lg,
    borderWidth: 1,
    borderColor: colors.border,
  },
});