import { View, Pressable, type ViewStyle } from "react-native";
import { useTheme } from "../theme";

interface CardProps {
  children: React.ReactNode;
  style?: ViewStyle;
  onPress?: () => void;
  variant?: "default" | "elevated" | "outlined";
}

export function Card({ children, style, onPress, variant = "default" }: CardProps) {
  const theme = useTheme();

  const variantStyles: Record<string, ViewStyle> = {
    default: {
      backgroundColor: theme.colors.card,
      borderRadius: theme.radius.lg,
      padding: theme.spacing.md,
      borderWidth: 1,
      borderColor: theme.colors.borderLight,
    },
    elevated: {
      backgroundColor: theme.colors.card,
      borderRadius: theme.radius.lg,
      padding: theme.spacing.md,
      ...theme.shadows.md,
    },
    outlined: {
      backgroundColor: "transparent",
      borderRadius: theme.radius.lg,
      padding: theme.spacing.md,
      borderWidth: 1.5,
      borderColor: theme.colors.border,
    },
  };

  if (onPress) {
    return (
      <Pressable
        onPress={onPress}
        style={[variantStyles[variant], style]}
      >
        {children}
      </Pressable>
    );
  }

  return (
    <View style={[variantStyles[variant], style]}>
      {children}
    </View>
  );
}