import { ReactNode } from "react";
import { StyleSheet, View, Pressable } from "react-native";
import { theme } from "../lib/theme";

export type OverlayStatus = "success" | "error" | "neutral";

const BG: Record<OverlayStatus, string> = {
  success: theme.success,
  error: theme.danger,
  neutral: theme.card,
};

export default function ResultOverlay({
  status,
  onDismiss,
  children,
}: {
  status: OverlayStatus;
  onDismiss?: () => void;
  children: ReactNode;
}) {
  return (
    <Pressable style={[styles.fill, { backgroundColor: BG[status] }]} onPress={onDismiss}>
      <View style={styles.inner}>{children}</View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  fill: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, zIndex: 10 },
  inner: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 },
});