import type { ReactNode } from "react";
import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";

import { GlassSurface } from "@/components/GlassSurface";
import { spacing } from "@/constants/theme";

const AUTH_CARD_RADIUS = 24;

type AuthCardProps = {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
};

export function AuthCard({ children, style }: AuthCardProps) {
  return (
    <GlassSurface radius={AUTH_CARD_RADIUS} style={style}>
      <View style={styles.inner}>{children}</View>
    </GlassSurface>
  );
}

const styles = StyleSheet.create({
  inner: {
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.lg,
    gap: spacing.lg,
  },
});