import { Pressable, StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';

import { Spacing } from '@/constants/theme';
import { useTheme } from '@/hooks/use-theme';

type CardProps = ViewProps & { onPress?: () => void };

export function Card({ style, onPress, ...props }: CardProps) {
  const theme = useTheme();
  const cardStyle: StyleProp<ViewStyle> = [styles.card, { borderColor: theme.cardBorder }, style];

  if (onPress) {
    return <Pressable onPress={onPress} style={cardStyle} {...props} />;
  }
  return <View style={cardStyle} {...props} />;
}

const styles = StyleSheet.create({
  card: {
    gap: Spacing.half,
    padding: Spacing.three,
    borderRadius: Spacing.three,
    borderWidth: StyleSheet.hairlineWidth,
  },
});