import { colors } from '@/aesthetics/styles';
import { useLanguage, useStrings } from '@/common/hooks/useStrings';
import { Animated, StyleSheet, Text, View } from 'react-native';

const fonts = {
  en: 'CormorantGaramond_600SemiBold',
  ko: 'NanumMyeongjo_400Regular',
};

export function SplashScreen({ fadeAnim }: { fadeAnim: Animated.Value }) {
  const strings = useStrings();
  const { language } = useLanguage();
  const font = fonts[language];

  return (
    <Animated.View style={[styles.splash, { opacity: fadeAnim }]}>
      <View style={styles.splashContent}>
        <Text style={[styles.splashTitle, { fontFamily: font }]}>{strings.common.appName}</Text>
        <View style={styles.splashDivider} />
        <Text style={[styles.splashTagline, { fontFamily: font }]}>{strings.common.tagline}</Text>
      </View>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  splash: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.light.background,
    zIndex: 1000,
  },
  splashContent: {
    alignItems: 'center',
  },
  splashTitle: {
    fontSize: 52,
    color: colors.light.text,
    letterSpacing: 2,
  },
  splashDivider: {
    width: 40,
    height: 1,
    backgroundColor: colors.light.accent,
    marginVertical: 16,
  },
  splashTagline: {
    fontSize: 14,
    color: colors.light.secondaryText,
    letterSpacing: 3,
    textTransform: 'uppercase',
  },
});