import type { ReactNode } from "react";import { useColorScheme, View, type StyleProp, type ViewStyle } from "react-native";import { useSafeAreaInsets } from "react-native-safe-area-context"; import { GlassSurface } from "./GlassSurface"; export interface GlassSafeAreaViewProps {  readonly leftSlot?: ReactNode;  readonly centerSlot?: ReactNode;  readonly rightSlot?: ReactNode;  readonly style?: StyleProp<ViewStyle>;} export function GlassSafeAreaView({  leftSlot,  centerSlot,  rightSlot,  style,}: GlassSafeAreaViewProps) {  const isDarkMode = useColorScheme() === "dark";  const insets = useSafeAreaInsets();  const headerPaddingTop = insets.top + 16;  const surfaceStyle = {    borderRadius: 0,    backgroundColor: isDarkMode ? "rgba(10,10,10,0.97)" : "rgba(255,255,255,0.97)",    borderBottomWidth: 1,    borderBottomColor: isDarkMode ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)",  } as const;   return (    <View style={[surfaceStyle, style]}>      <GlassSurface        chrome="none"        glassEffectStyle="regular"        tintColor={isDarkMode ? "rgba(15,23,42,0.24)" : "rgba(255,255,255,0.18)"}        style={{ borderRadius: 0, backgroundColor: "transparent" }}      >        <View          style={{            flexDirection: "row",            alignItems: "center",            paddingHorizontal: 20,            paddingTop: headerPaddingTop,            paddingBottom: 16,            gap: 10,          }}        >          <View style={{ alignItems: "flex-start", justifyContent: "center" }}>{leftSlot}</View>          <View            style={{ flex: 1, alignItems: "center", justifyContent: "center", overflow: "hidden" }}          >            {centerSlot}          </View>          <View style={{ alignItems: "flex-end", justifyContent: "center" }}>{rightSlot}</View>        </View>      </GlassSurface>    </View>  );}