/**
 * Sample React Native App
 * <https://github.com/facebook/react-native>
 *
 * @format //  ESLint 포맷팅 규칙을 적용하기 위한 주석
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  ScrollView, // 스크롤 가능한 컨테이너 컴포넌트
  StatusBar, // 상단 상태 표시줄 스타일링 컴포넌트
  StyleSheet,
  Text,
  useColorScheme, // 사용자 기기의 다크/라이트 모드 감지 훅
  View, // 기본 컨테이너 컴포넌트
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,// 앱 상단 헤더 컴포넌트
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; // 기본 앱 템플릿 컴포넌트 모음

// Section 컴포넌트의 props 타입 정의
// PropsWithChildren을 사용해 children prop과 title prop을 포함
type SectionProps = PropsWithChildren<{
  title: string;
}>;
// Section 컴포넌트 - 앱의 각 섹션을 표시
function Section({children, title}: SectionProps): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark'; // 다크 모드 감지
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black, // 다크/라이트 모드에 따른 텍스트 색상 변경
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark, // 다크/라이트 모드에 따른 설명 텍스트 색상
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark'; // 사용자 기기의 다크 모드 설정 감지
  // 다크/라이트 모드에 따른 배경색 스타일 설정
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  /*
   * To keep the template simple and small we're adding padding to prevent view
   * from rendering under the System UI.
   * For bigger apps the reccomendation is to use `react-native-safe-area-context`:
   * <https://github.com/AppAndFlow/react-native-safe-area-context>
   *
   * You can read more about it here:
   * <https://github.com/react-native-community/discussions-and-proposals/discussions/827>
   */
  const safePadding = '5%'; // 시스템 UI와 겹치지 않도록 안전 여백 설정

  return (
    <View style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'} // 다크/라이트 모드에 따른 상태바 스타일
        backgroundColor={backgroundStyle.backgroundColor} // 상태바 배경색 설정
      />
      <ScrollView style={backgroundStyle}>
        <View style={{paddingRight: safePadding}}>
          <Header />
        </View>
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
            paddingHorizontal: safePadding,
            paddingBottom: safePadding,
          }}>
          <Section title="하이루루">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </View>
  );
}
// StyleSheet API 적용
const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;