managarten/picture/packages/mobile-ui/components/ui/Card/Card.tsx

import { View, Pressable, ViewStyle } from 'react-native';

export type CardProps = {
  /** Card content */
  children: React.ReactNode;
  /** Make card pressable */
  onPress?: () => void;
  /** Background color */
  backgroundColor?: string;
  /** Border radius */
  borderRadius?: number;
  /** Padding inside card */
  padding?: number;
  /** Add shadow */
  shadow?: boolean;
  /** Add border */
  border?: boolean;
  /** Border color */
  borderColor?: string;
  /** Additional styles */
  style?: ViewStyle;
};

/**
 * Container card component with optional press interaction.
 *
 * @example
 * ```tsx
 * <Card>
 *   <Text variant="h3">Card Title</Text>
 *   <Text>Card content goes here</Text>
 * </Card>
 *
 * <Card onPress={() => {}} shadow>
 *   <Text>Pressable card</Text>
 * </Card>
 * ```
 */
export function Card({
  children,
  onPress,
  backgroundColor = '#FFFFFF',
  borderRadius = 12,
  padding = 16,
  shadow = true,
  border = false,
  borderColor = '#E5E7EB',
  style,
}: CardProps) {
  const cardStyles: ViewStyle = {
    backgroundColor,
    borderRadius,
    padding,
    ...(border && {
      borderWidth: 1,
      borderColor,
    }),
    ...(shadow && {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 8,
      elevation: 3,
    }),
    ...style,
  };

  if (onPress) {
    return (
      <Pressable
        onPress={onPress}
        style={({ pressed }) => [
          cardStyles,
          pressed && { opacity: 0.8 },
        ]}
      >
        {children}
      </Pressable>
    );
  }

  return <View style={cardStyles}>{children}</View>;
}