import "@/global.css";

import { StatusBar } from "expo-status-bar";
import { Box } from "./components/ui/box";
import { Button, ButtonText } from "./components/ui/button";
import { Pressable } from "./components/ui/pressable";
import { Text } from "./components/ui/text";
import { GluestackUIProvider } from "./components/ui/gluestack-ui-provider";

export default function App() {
  return (
    <GluestackUIProvider>
      {/* SafeAreaView 역할을 하는 Box 컴포넌트 */}
      <Box className="flex-1 pt-10">
        <Box className="flex-1 items-center justify-center p-5 gap-y-4">
          <Text className="text-2xl font-bold mb-2">✨ Welcome to My App!</Text>
          <Text>Gluestack UI와 NativeWind 설정이 완료되었습니다.</Text>

          <Button onPress={() => alert("버튼이 눌렸습니다!")}>
            <ButtonText className="text-white font-semibold text-xl">
              시작하기
            </ButtonText>
          </Button>

          <Pressable className="mt-5">
            <Text className="underline text-sm">더 알아보기</Text>
          </Pressable>
        </Box>
      </Box>
      <StatusBar style="auto" />
    </GluestackUIProvider>
  );
}