import React from "react";
import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import { radius, spacing, theme } from "../theme";

export type CardProps = {
  children: React.ReactNode;
  padded?: boolean;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
  testID?: string;
};

/** White card, 12–16px radius, the app's one soft shadow style. */
export function Card({
  children,
  padded = true,
  onPress,
  style,
  testID,
}: CardProps): React.JSX.Element {
  const content = (
    <View
      style={[styles.base, padded && styles.padded, style]}
      testID={onPress ? undefined : testID}
    >
      {children}
    </View>
  );

  if (!onPress) return content;

  return (
    <Pressable
      onPress={onPress}
      accessibilityRole="button"
      testID={testID}
      style={({ pressed }) => [pressed && styles.pressed]}
    >
      {content}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  base: {
    backgroundColor: theme.surface,
    borderRadius: radius.lg,
    ...theme.shadow,
  },
  padded: {
    padding: spacing[4],
  },
  pressed: {
    opacity: 0.92,
  },
});
