import { StyleSheet, View, type ViewProps } from "react-native";

import { BrandBackground } from "@/components/BrandBackground";

/** Auth screens — brand grid/blob behind content. */
export function AuthBackground({ style, children, ...props }: ViewProps) {
  return (
    <View style={[styles.root, style]} {...props}>
      <BrandBackground />
      <View style={styles.content}>{children}</View>
    </View>
  );
}

/** App tab/stack screens — brand grid/blob behind content (native tabs block the root layer). */
export function AppBackground({ style, children, ...props }: ViewProps) {
  return (
    <View style={[styles.root, style]} {...props}>
      <BrandBackground />
      <View style={styles.content}>{children}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: "transparent",
  },
  content: {
    flex: 1,
    backgroundColor: "transparent",
  },
});