import { memo } from 'react';
import { View, YStack } from 'tamagui';
import CustomText from '@/components/common/CustomText.jsx';
import { wp } from '@/utils/ui/screenUtils';
import { useTranslation } from '@/node_modules/react-i18next';
import Constants from 'expo-constants';
import { useAppStore } from '@/stores';
const LoginHeader = () => {
  const { t } = useTranslation('login');
  const appName = Constants.expoConfig?.name 
  const primaryColor = useAppStore(s => s.primary);
  return (
    <YStack style={{ marginBottom: wp(54) }}>
      <View flexDirection="row">
        <CustomText style={{ fontSize: wp(32) }}>{t('header.title')}</CustomText>
        <CustomText style={{ color: primaryColor, fontSize: wp(32) }}>{appName}</CustomText>
      </View>
      <CustomText>{t('header.subtitle')}</CustomText>
    </YStack>
  );
};

export default memo(LoginHeader);