import { Surface } from "react-native-paper";
import { View, Text } from "react-native";

interface AuthCardProps {
  children: React.ReactNode;
  title?: string;
  subtitle?: string;
}

export const AuthCard = ({ children, title, subtitle }: AuthCardProps) => {
  return (
    <Surface
      style={{
        borderRadius: 20,
        padding: 24,
        backgroundColor: "rgba(255,255,255,0.9)",
        elevation: 4,
      }}
    >
      {(title || subtitle) && (
        <View style={{ alignItems: "center", marginBottom: 24 }}>
          {title && (
            <Text
              style={{
                fontSize: 24,
                fontWeight: "bold",
                color: "#6750a4",
                marginBottom: subtitle ? 12 : 0,
                textAlign: "center",
              }}
            >
              {title}
            </Text>
          )}
          {subtitle && (
            <Text style={{ fontSize: 16, color: "rgba(0,0,0,0.6)" }}>
              {subtitle}
            </Text>
          )}
        </View>
      )}
      {children}
    </Surface>
  );
};