import React from "react";
import {
  View,
  StyleSheet,
  TouchableOpacity,
  ViewStyle,
  StyleProp,
} from "react-native";
import { useTheme } from "../contexts/ThemeContext";

type CardVariant = "default" | "elevated" | "bordered";

interface MinimalCardProps {
  children: React.ReactNode;
  variant?: CardVariant;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
}

/**
 * MinimalCard - Clean card component without gradients
 *
 * Variants:
 * - default: Subtle shadow on surface background
 * - elevated: More prominent shadow
 * - bordered: Border instead of shadow
 */
export function MinimalCard({
  children,
  variant = "default",
  onPress,
  style,
}: MinimalCardProps) {
  const { colors } = useTheme();

  const cardStyles = [
    styles.base,
    {
      backgroundColor: colors.surface,
    },
    variant === "default" && styles.default,
    variant === "elevated" && styles.elevated,
    variant === "bordered" && {
      borderWidth: 1,
      borderColor: colors.border,
    },
    style,
  ];

  if (onPress) {
    return (
      <TouchableOpacity
        style={cardStyles}
        onPress={onPress}
        activeOpacity={0.7}
      >
        {children}
      </TouchableOpacity>
    );
  }

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

const styles = StyleSheet.create({
  base: {
    borderRadius: 12,
    padding: 16,
  },
  default: {
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 3,
    elevation: 1,
  },
  elevated: {
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 8,
    elevation: 2,
  },
});
