import { FC } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

export type ErrorDisplayProps = {
  /**
   * Optional callback for retry action
   */
  onRetry?: () => void;
};

export const ErrorDisplay: FC<ErrorDisplayProps> = ({ onRetry }) => (
  <View style={styles.errorContent}>
    <Text style={styles.errorIcon}>⚠️</Text>
    <Text style={styles.errorText}>Unable to load this content</Text>
    <Text style={styles.errorSubtext}>Please try again later</Text>
    {onRetry && (
      <Pressable onPress={onRetry} style={styles.retryButton}>
        <Text style={styles.retryButtonText}>Retry</Text>
      </Pressable>
    )}
  </View>
);

const styles = StyleSheet.create({
  errorContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 16,
  },
  errorIcon: {
    fontSize: 32,
    marginBottom: 16,
  },
  errorText: {
    color: '#333',
    fontSize: 16,
    textAlign: 'center',
    fontWeight: '500',
    marginBottom: 8,
    minHeight: 24,
  },
  errorSubtext: {
    color: '#666',
    fontSize: 14,
    textAlign: 'center',
    minHeight: 20,
  },
  retryButton: {
    marginTop: 16,
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
  },
  retryButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '500',
  },
});