import React, { type ReactNode } from "react";
import { View, StyleSheet, type ViewStyle } from "react-native";
import { spacing, borderRadius, shadows } from "../../theme";
import { useTheme } from "../../context/ThemeContext";

interface CardProps {
    children: ReactNode;
    style?: ViewStyle;
}

export default function Card({ children, style }: CardProps) {
    const { colors } = useTheme();
    return (
        <View
            style={[
                styles.card,
                shadows.md,
                {
                    backgroundColor: colors.bgCard,
                    borderColor: colors.borderLight,
                },
                style,
            ]}
        >
            {children}
        </View>
    );
}

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