import React from 'react';
import { View, Pressable, StyleSheet } from 'react-native';
import CustomText from '@/components/common/CustomText.jsx';
import { wp } from '@/utils/ui/screenUtils';
import LoadingSpinner from '@/components/ui/LoadingSpinner';
import { useTranslation } from '@/node_modules/react-i18next';

function ListFooter({ loadingMore, hasMore, dataLength, primaryColor, error, onRetry }) {
  const { t } = useTranslation();
  if (loadingMore) {
    return (
      <View style={styles.loadingWrap}>
        <LoadingSpinner size={wp(25)} color={primaryColor} />
      </View>
    );
  }

  if (error) {
    return (
      <View style={styles.retryWrap}>
        <Pressable onPress={onRetry} hitSlop={wp(8)}>
          <CustomText style={[styles.retryText, { color: primaryColor }]}>{t('approve:listFooter.retry')}</CustomText>
        </Pressable>
      </View>
    );
  }

  if (!hasMore && dataLength > 0) {
    return (
      <View style={styles.doneWrap}>
        <CustomText style={styles.doneText}>{t('approve:listFooter.loadedAll')}</CustomText>
      </View>
    );
  }

  return <View style={styles.bottomGap} />;
}

export default React.memo(ListFooter);

const styles = StyleSheet.create({
  loadingWrap: { paddingVertical: wp(12), alignItems: 'center', justifyContent: 'center' },
  retryWrap: { paddingVertical: wp(16), alignItems: 'center', justifyContent: 'center' },
  retryText: { fontSize: wp(12) },
  doneWrap: { paddingVertical: wp(16), alignItems: 'center', justifyContent: 'center' },
  doneText: { color: '#9AA0A6', fontSize: wp(12) },
  bottomGap: { height: wp(4) },
});