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

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

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

export function MinimalCard({
  children,
  variant = "default",
  onPress,
  style,
  padding = 20,
}: MinimalCardProps) {
  const { colors } = useTheme();

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

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

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

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