import React from 'react'
import { View, TouchableOpacity, ViewProps } from 'react-native'
import Text from './ui/Text'

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

export default function ErrorState({ message = 'An error occurred', onRetry, testID, ...props }: ErrorStateProps) {
  return (
    <View testID={testID} className="flex-1 items-center justify-center px-4" {...props}>
      <Text className="text-center text-gray-600 dark:text-gray-400">{message}</Text>
      {onRetry && (
        <TouchableOpacity onPress={onRetry} className="mt-4 px-6 py-2 bg-blue-500 rounded-lg">
          <Text className="text-white">Retry</Text>
        </TouchableOpacity>
      )}
    </View>
  )
}