import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useTheme } from '@/shared/styles/useTheme';

interface ErrorStateProps {
  message?: string;
  onRetry?: () => void;
}

const ErrorState: React.FC<ErrorStateProps> = ({ message = 'Something went wrong', onRetry }) => {
  const { colors, spacing } = useTheme();
  return (
    <View style={[styles.container, { padding: spacing.md }]}>
      <Text style={[styles.title, { color: colors.error }]}>{message}</Text>
      {onRetry ? (
        <TouchableOpacity onPress={onRetry} style={[styles.button, { borderColor: colors.error }]}>
          <Text style={[styles.buttonText, { color: colors.error }]}>Retry</Text>
        </TouchableOpacity>
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 16,
    marginBottom: 8,
  },
  button: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderWidth: 1,
    borderRadius: 6,
  },
  buttonText: {
    fontSize: 14,
  },
});

export default ErrorState;


