import { radius, shadows, spacing, useColors } from '@/aesthetics/styles';
import type { ReactNode } from 'react';
import { StyleSheet, View } from 'react-native';

export function Card({ children, style }: { children: ReactNode; style?: object }) {
  const c = useColors();
  return (
    <View
      style={[
        styles.card,
        shadows.sm,
        { backgroundColor: c.surface, borderColor: c.borderSubtle },
        style,
      ]}
    >
      {children}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: radius.xl,
    borderWidth: 1,
    padding: spacing.xl,
  },
});